javascript menus

**gogo1** · 02-11-2007, 04:53 PM

Hi all Really hoping you can help

I have a webiste which consits of two frames, left (with a menu in it) and right (main contect frame). Its the menu in the left frame i am having difficulty with.

I created a javascript menu which expands vertically when a item is selected to show the sub menu items. When i select a menu item the menu expands and shows sub menu items , i can get these sub menu items to load up, when clicked, in the right frame and leave the menu in its current state (expanded) but cannot make it so that when a main menu item is selected, a link opens in the right frame and the menu expands in the left so basically if i selected , in this example eggs the main pages for eggs would open in the right frame and the menu in the left would expand to show all the egg submenu items so thats eggs can be looked into further if they dont get the info they need from the first page.

this is the left frame code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />

<script>



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, b, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    b = document.createElement("b");
	
	
    menu.replaceChild(b, text);
    b.appendChild(text);
    b.href = "transport";
    b.onclick = showMenu;
    b.onfocus = function(){this.blur()};
  }
}

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

</script>
</head>

<body>
<div class ="contentmenu">
  <ul id="menu">
  
    <li>Home</li> 
    <li>Eggs
    <ol>
      <li><a href="#"> egg1</a></li>
      <li><a href="#"> egg2</a></li>
      <li><a href="#"> egg3 </a></li>
      <li><a href="#"> egg4 </a></li>
    </ol>
	</li>
	
	<li> ham
      <ol>
        <li>ham1</li>
        <li>ham2</li>
        <li>ham3></li>
        <li>ham4</li>
        <li>ham5</li>
</ol>
  
	
    <li>Links
      <ol>
        <li><a href="#">Sub Item </a></li>
        <li><a href="#">Sub Item </a></li>
        <li><a href="#">Sub Item </a></li>
      </ol>
    </li>
	
  </ul>
</div>
  
  
</body>
</html>

and this is the style sheet behind it all

Code:

ul#menu {
  width: 130px;
  list-style-type: none;
  border-top: 1px solid #b9a894;
  margin: 0px;
  padding: 0px;
  font-size:14px;
  background-image:url(images/menuitem.jpg);
  
}

ul#menu ol {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0px;
  font-family: verdana, sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color:#000066;
 
  }
  

ul#menu li, 
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 12px;
  color: #E4E4E4;
}

ul#menu li {

  border-bottom: dotted 1px #FFFFFF;
  line-height: 13px;
  margin-bottom: 10px;
  margin-top:10px;
  
}

ul#menu ol li {
  margin-bottom: 0px;
  margin-top:5px;
 
}


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

ul#menu a:hover {
  color: #0066CC;
}

ul#menu a.active {

	font-weight: 900;
	color:#FFFFFF;
}

Really hopeing someone can help ive tried everything i can think of but the menu will not expand and open in the right frame

Any help at all is greatfully accepted

Thank you

gogo

**tswaters** · 03-20-2007, 12:51 AM

I normally don't respond to these things, but I see it's been about a month or two and still no replies... so I'll do my best.

I'm going to say your problem lies in the initMenu() function, the line:

Code:

  b.href = "transport";  // What is "transport"?

First off, why are you creating a B element? If you want it to be a link, you should make it an <A> element. Secondly, you should have no need to create <A> elements, because they should already exist as part of the structure of your document... inside the list,

e.g.

HTML Code:

<ul><li><a href="destination.htm"> a link to destination</a></li></ul>

If each list item has an associated page, where better to put the reference to that page but in the <li> itself?

It looks as though the only <A>'s you have are on the second layer, and even then they're only going to "#", which wouldn't load a page... those links would just reload the frame to the "#" anchor, which is at the top unless specified elsewhere.

I would recommend including the <A> on every <LI> line, specifying where the link should go... then in your initMenu function, change it so it can go down the DOM tree to the <A> level and pick up the HREF there and drop it the...the B element you're creating? Second thought: Why don't you just keep the <A> as is, and add in the onClick and onFocus methods to them during the initMenu function? That would add in the functinoality to get your dynamic menu stuff to go....

Going back to the basics, yes it is possible to do DOM stuff and load a link after a single click of a link...

e.g.

HTML Code:

<a href="gohere.htm" onClick="alert('im going!');" target=rightframe> 
gives alert then loads gohere.htm in target rightframe
</a>

There are many ways to skin any cat -- and it looks like you've chosen the most painful way to do it... You should always -- ALWAYS -- consider the structure of the page and what it is you're really trying to accomplish and determine the best way to get what you're trying to accomplish done....before you re-invent the wheel to travel to the corner store, when its really a block away on a bumpy road that would get your wheel all out-of-tune if used... and it's just so much easier to walk instead.

Thread: javascript menus

Thread Tools

Search Thread

javascript menus

Bookmarks

Bookmarks

Posting Permissions