JS menu... Can it be changed to work for submenus also?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

JS menu... Can it be changed to work for submenus also?

Post by UrButtFullOfArr0ws »

I got this JS script from javascript.internet.com
It works neatly, BUT i need it to work for submenus also. Here's the code:

Code: Select all

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, submenus, 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.onmouseover = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

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

Code: Select all

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a>
      	<ul>
      		<li>abcd</li>
      		<li>abcde</li>
      		<li>abcdef</li>
      	</ul></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>

Code: Select all

ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li, 
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "- ";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
Output looks somthing like this:

Code: Select all

Menu Item 1
   Sub Item 1
     -abcd
     -abcde
     -abcdef
   Sub Item 2
.
.
.
.
And so on
I'm kinda new to JS so take it easy :D
Can anyone help?
Thank you in advance.

Edit: Sorry about the earlier double post, i hadnt seen it double posted until now, 10 hours later.
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

Post by UrButtFullOfArr0ws »

Ehm...hmmm...yes indeed... Bump? :?
Can someone at least tell me if they don't know anything so i can work more on it myself... I've been working on other parts of the site, but this is a key element of the site... :dubious:
I don't want to bump anymore becouse i might reach excessive bumping...
Post Reply