AJAX 2-level Menu Maker
Feb 13, 2007
Tested in IE6 and Firefox. Hover on main menu items, sub-items are displayed. Main menu items are not required to have sub items.
MenuTree.xml
<?xml version="1.0" ?>
<menu>
<main>
<text>First</text>
<sub>
<text>Anything</text>
<link>links/anything.html</link>
</sub>
<sub>
<text>Everything</text>
<link>links/everything.html</link>
</sub>
<sub>
<text>Nothing</text>
<link>links/nothing.html</link>
</sub>
</main>
<main>
<text>Second</text>
<link>links/apples.html</link>
</main>
<main>
<text>Third</text>
<sub>
<text>Something</text>
<link>links/something.html</link>
</sub>
</main>
<main>
<text>Fourth</text>
<link>links/oranges.html</link>
</main>
</menu>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var response = "";
var nContainer = "";
var mainItemsText = [];
var mainItemsLink = [];
var subItemsText = [];
var subItemsLink = [];
var mainItemsWithSubs = [];
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
function hideSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = 'none'
}
}
function showSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = ''
}
}
function setHoverDisplay(){
if (IE)
{
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
}
}
}
else {
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
}
}
}
}
function buildMenu(){
nContainer = document.getElementById('menuContainer');
mainItemsWithSubs = [];
var n = 0;
for (i=0; i<mainItemsText.length; i++)
{
var nItem = document.createElement('dt');
var nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(mainItemsText[i]));
if (mainItemsLink[i] != undefined)
{
nLink.setAttribute('href',mainItemsLink[i]);
}
else{
nLink.setAttribute('href',"#");
nLink.onclick = function(){return false;}
mainItemsWithSubs[n++] = i;
}
nContainer.appendChild(nItem);
}
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (s=0; s<subItemsText[i].length; s++)
{
nItem = document.createElement('dd');
nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(subItemsText[i][s]));
nLink.setAttribute('href',subItemsLink[i][s]);
if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
}
}
setHoverDisplay();
}
function parseResponse(){
var n = 0;
var s = 0;
var mainItems = response.getElementsByTagName('main');
if (IE)
{
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].firstChild.text;
if (mainItems[i].childNodes[1].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[1].text;
}
n++;
}
}
else {
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
if (mainItems[i].childNodes[3].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
}
n++;
}
}
for (i=0; i<mainItems.length; i++)
{
if (IE && mainItems[i].childNodes[1].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
{
subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
}
s++;
}
if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
var subs = mainItems[i].getElementsByTagName('sub');
for (n=0; n<subs.length; n++)
{
subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
}
s++;
}
}
buildMenu();
}
function getMenuTree(){
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
response = request.responseXML;
parseResponse();
}
else {alert('Error MenuTree.xml '+ request.statusText)}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
request.open("GET", "MenuTree.xml"+forceGET, true);
request.send(null);
}
onload=getMenuTree;
</script>
<style type="text/css">
dt {background-color:#b0c4de;text-indent:5px}
dd {background-color:#87ceeb}
a {color:#00008b}
</style>
</head>
<body>
<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
</div>
</body>
</html>
View 6 Replies
ADVERTISEMENT
Jan 7, 2009
I am trying to turn a single level flyout menu into a multi level one.
It uses a dt for the title, and a ul within the dd for the menu items. The dd opens to the right of the dt.
The problem is that the second level menu (a dl within an li within another dl) [URL] - flyout4 & subflyout5.
The z-index is increased each time. I just can't figure why the area is limited.
javascript, css & html follow -
Code JavaScript:
/** FLYOUT = vertical dropdown **/
var Flyout = {
DDSPEED:10,
[Code].....
View 1 Replies
View Related
Jun 3, 2009
The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.
View 2 Replies
View Related
May 3, 2010
I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? [URL]
View 2 Replies
View Related
Jan 24, 2009
I've been asked to create a site for my younger sister and she's requested a horizontal pull-down menu using graphics for the links instead of simply text. This is my first time trying to code such a menu (topic not covered in class) and I'm having some difficulty getting it to work completely.
Right now it's partially working. The various sub menus do show up when clicking or rolling over the previous menu item. However all menu items past the one clicked jump down one line when expanding instead of simply showing the sub menu under the main line up. The rollover also has issues but mostly because I haven't finished coding the onmouseout part, so it doesn't go away. I'm trying to get the main pull down working before tackling that part. Below is the JavaScript function I'm trying to use as well as a part of the menu. I've already spent months trying to get this working and am not making much headway.
[Code]...
View 2 Replies
View Related
Jul 26, 2010
I run an educational website with a CSS/JavaScript based menu that is right now only single level. I am trying to convert it over to multi level. I have tried a few other multi level menus but I have done a lot of customization in terms of appearance for this current menu, so none of the new ones looked right.
Here is the site: [url]
Here is the CSS: [url]
Here is the JavaScript: [url]
View 3 Replies
View Related
Mar 19, 2009
I have a 3-level menu using JQuery-Superfish. I would like to hover over the top-level menu item and have BOTH the 2nd and 3rd-level menus open automatically.
View 1 Replies
View Related
Sep 16, 2009
I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick. I have taken from....
Code:
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
[Code]...
View 4 Replies
View Related
Sep 24, 2010
Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.Here is my HTML
<div class="header-nav">
<ul id="navigation">
<li><a href="">home</a></li>
[code].....
View 1 Replies
View Related
May 16, 2011
I have inherited a site with superfish used as the menu which seems to work fine except that I wish to disable the links at the top level so that a click on the top level of the menu goes nowhere only clicks on the sub menu list. At the moment each top level menu item is a section and the sub menu list categories. There is nothing I need or want to place in the Section heading so a link from this is unnecessary but at the moment clicking on the top level (section) leads to a page i do not want.Example:-Top Level Section (no link to anywhere)2nd level Category 1 (link to article)3rd level Category 2 (link to article)etc.
Is this possible to do. I feel sure it should be as it is a normal facility on a drop down menu but I cannot find anywhere in the options which enables this. I am not sufficiently conversant with CSS to try playing with the current layout which other than this seems to be working ok.
View 1 Replies
View Related
May 26, 2011
I am really pressing on to finish this home page menu, and I'm trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreview. The other thing I'm trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item's hover.This is my JavaScript:
Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
[code]....
View 1 Replies
View Related
Oct 29, 2010
I have implemented a jQuery hover top level menu & it is working fine in bothIE 7& 8. However, when I am executing the same code in Mozilla Firefox, it is not rendering hover effect at all. Also, I am adding a <span> using jQuery if JavaScript isn't enabled. This span is also not getting added in Mozilla.
Following is the code that I am using.
<script type="text/javascript" src="[URL]"></script>
<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.pnode li a").mouseover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
I came to know that IE & Mozilla see .parent differently.I have tried everything but not able to get this stuff working in Mozilla. I am using Firefox 3.5.5 version.
View 4 Replies
View Related
Jul 11, 2011
I have implemented Superfish in SAP Portal. there is a small issue when I take a print using the browser's print option. When I try printing the Web Page from the browser, the Top Level Navigation Menu appears as a list of links (vertical). This is happening in both IE as well as Firefox.
I have seen the same issue in the website from where I downloaded Superfish :-|
1. Goto: [URL]
2. Click on 'Print Preview' button in your Browser.
3. The Superfish Menu below the text 'The result:' will appear as a list of links in the print preview.
View 6 Replies
View Related
May 19, 2009
I want that when i click on a other main item that the other will close. Now it still keep open and then ill get a long menu list. How do i do it , i dont have js experience.
[Code]...
View 2 Replies
View Related
Jun 24, 2009
I would like the second level of buttons (submenu) to disappear once the cursor is no longer hovering over them - rather than appearing until another button in the top level is hovered over. modify the javascript below to do that?
[Code]....
View 3 Replies
View Related
Nov 3, 2005
I helped someone out in the JS forum and it inspired this script which is quite handy for Ajax forms. Just pass the form object and it will return a querystring to attach to a url. Careful though, querystrings have limitations on the length of the string and it varies between browsers. Maybe there is something that does this already but I don't know of it.
function buildQuery(frm)
{
var ele=frm.elements;
var len=ele.length;
var str="?";
for(var i=0;i<len;i++)
{
var c_obj=ele[i]
if(!c_obj.disabled)
{
if(c_obj.name)
{
if(c_obj.type.toLowerCase()=="radio")
{
if(c_obj.checked)
{
str+=encodeURIComponent(c_obj.name)+"="+encodeURIComponent(c_obj.value)+"&";
}
}
else if(c_obj.type.toLowerCase()=="checkbox")
{
if(c_obj.checked)
{
if(c_obj.value)
{
c_val=c_obj.value;
}
else
{
c_val="on";
}
str+=encodeURIComponent(c_obj.name)+"="+encodeURIComponent(c_val)+"&";
}
}
else if(c_obj.tagName.toLowerCase()=="select")
{
if(c_obj.options.length>0)
{
if(c_obj.multiple)
{
var opt=c_obj.options;
var len2=opt.length;
var opt_group=encodeURIComponent(c_obj.name)+"=";
for(var j=0;j<len2;j++)
{
if(opt[j].selected)
{
if(j!=0)
{
if(opt[j].value)
{
opt_group+=","+encodeURIComponent(opt[j].value);
}
else
{
opt_group+=","+encodeURIComponent(opt[j].value);
}
}
else
{
if(opt[j].value)
{
opt_group+=encodeURIComponent(opt[j].value);
}
else
{
opt_group+=encodeURIComponent(opt[j].text);
}
}
}
}
str+=opt_group+"&"
}
else
{
if(c_obj.options[c_obj.selectedIndex].value)
{
str+=encodeURIComponent(c_obj.name)+"="+encodeURIComponent(c_obj.options[c_obj.selectedIndex].value)+"&";
}
else
{
str+=encodeURIComponent(c_obj.name)+"="+encodeURIComponent(c_obj.options[c_obj.selectedIndex].text)+"&";
}
}
}
}
else
{
str+=encodeURIComponent(c_obj.name)+"="+encodeURIComponent(c_obj.value)+"&";
}
}
}
}
str=str.substring(0,str.length-1);
return str;
}
View 26 Replies
View Related
Jun 7, 2011
For some reason the joke maker is not working. With this, they can do 4 things 1. make a joke 2. make an answer for their joke 3. look at other's jokes 4. check their answers. Nothing works.
There are 44 people, plus visitors on the site, each with a number form 5999 - 6043(plus 5998, which is a visitor one).
I have a two javascripts(one for the xml load doc), an XML document, and of course, the web page html document.
Javascript one:
Code:
Javascrirpt two:
Code:
XML(I had to shorten it, because I had too many characters in the post. Please guess the rest):
Code:
View 4 Replies
View Related
Jul 23, 2005
Can anyone give me the code or point me in the direction of a simple
javascript certificate maker so that users can input there name and
date so as to use on my site?
View 7 Replies
View Related
Jan 10, 2010
version of Apycom's jQuery menu; you can find itat http://apycom.com/ and it is looking really good.I have uploaded files, and published it on a test site - www.flexin.beUnfortunately, some of the submenus starting from the second that haschildren elements, it adds the item on the top level in InternetExplorer.Does anyone on this list has any experience with this library?
View 2 Replies
View Related
Oct 6, 2009
I'm trying to get the top menu to float however it is just not working.
Code:
<style type="text/css">
<!--
#secnav {
width: 220px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
} .....
View 1 Replies
View Related
Feb 8, 2010
I've got this XML file:
<?xml version="1.0" encoding="utf-8"?>
<Menu>
<Section>
<Title>Product Information</Title>
<Topic url="howto.html">How to use This Product</Topic>
<Topic url="product.html">Product Overview</Topic>
<Topic url="sysreq.html">System Requirements</Topic>
</Section>
.....
</Menu>
There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics. Here's the JS I'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it:
if (window.XMLHttpRequest) {
xhttp=new XMLHttpRequest(); //create ajax var
} else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE
} xhttp.open("GET","menu.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
document.write("<div class='acc'>");
var x=xmlDoc.getElementsByTagName("Section");
for (i=0;i<x.length;i++) {
document.write("<dt>");
document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>");
document.write("<dd><ul>");
var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0];
for (foo=0;foo<x.length;foo++){
document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>");
} document.write("</ul></dd>");
} document.write("</div>");
It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example:
Product Information
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
I'm not very confident in the syntax, or what it is exactly doing.
View 1 Replies
View Related
Apr 11, 2011
I am wondering if I can get the value of a drop down box that was created using ajax.I have a div tag holding the spot on item.php and when the user make a selection it calls my getitem.php which returns a drop down with the populated items.
<option value="0"></option>
<?
while($row = mysql_fetch_array($result))[code].....
So I have no tag handler since they were all created back on the getitem.php page. What is the best way to do this? I would love the have the drop down tags on item.php but how do I dynamically populate the list then?
View 5 Replies
View Related
Oct 29, 2009
I have a menu that grabs content via ajax and json. This menu has 3 levels. I can click on the first level and it loads fine. This is the .cat class that then toggles. However when I click on the 2nd level link, the .ahref class it does not fire.
[Code]...
View 2 Replies
View Related
Jul 15, 2011
I have a drop down selection menu, and I need it to populate an additional drop down menu. Basically a chained set of drop down lists. Below is my current code:
Code:
<script language="javascript">
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
[Code]...
View 2 Replies
View Related
Apr 13, 2011
how to get a drop down box to populate using a value from a text box with out a page refresh.
I can get a value from a drop down box to populate another drop down box, but can't quite figure out how to get text value to populate a drop down menu.
View 7 Replies
View Related
May 25, 2009
The second menu is populating correctly from the first menu. The third menu doesn't work because it is not pulling the cat1 & cat2 values. I suspect it is the "checkNew" function, which I tried (with limited Javascript knowledge) to copy and alter from the "checkSelected" function.
[Code]....
View 4 Replies
View Related
