Jump to content


This topic is now archived and is closed to further replies.


cross browser expanding menu help needed

Recommended Posts

I have got some javascript from here [url=http://javascript.internet.com/navigation/expanding-menu.html]http://javascript.internet.com/navigation/expanding-menu.html[/url] 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 [url=http://www.jackgodfrey.org.uk]http://www.jackgodfrey.org.uk[/url].

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
[code]// Node Functions

  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() {
    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.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};

if(document.createElement) window.onload = initMenu;[/code]

This is the menu item.  The problem lies with the About menu item
[code]<ul id="menu">
<li><a href="/index">Homepage</a></li>
<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>
<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>

If anyone knows how I can work around this I would be etremely grateful  ???

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.