Jump to content


Photo

cross browser expanding menu help needed


  • Please log in to reply
No replies to this topic

#1 AdRock

AdRock
  • Members
  • PipPipPip
  • Advanced Member
  • 911 posts

Posted 29 August 2006 - 11:40 AM

I have got some javascript from here http://javascript.in...nding-menu.html but i am having a little trouble with it.

I only actually want to expands one menu item so have edited the html so expand only the menu item i want.  The problem doesn't exist in IE but in Firefox the menu item that is supposed to expand doesn't.  Try it and have a look at my site and you'll see what I mean http://www.jackgodfrey.org.uk.

The first item in the menu i don't want to expand and that is what is causing the problem.  If i remove the first menu item it works perfectly, but that is no good

Here is the code for the javascript
// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;

This is the menu item.  The problem lies with the About menu item
<ul id="menu">
<li><a href="/index">Homepage</a></li>
<li>About
<ol>
<li><a href="/jack">Jack</a></li>
 li><a href="/honeylands">Honeylands</a></li>
<li><a href="/history">Honeylands History</a></li>
<li><a href="/toy">The Toy Library</a></li>
</ol>
</li>
<li><a href="/news">News / Events</a></li>
<li><a href="/events">Coming Events</a></li>
<li><a href="/gallery">Image gallery</a></li>
<li><a href="/gbook/gbook.php">Guestbook</a></li>
<li><a href="/sponsors">Sponsors / Supporters</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>

If anyone knows how I can work around this I would be etremely grateful  ???
If your topic has been solved, please mark the topic as SOLVED.

This helps others from identifying which topics need help still




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users