Real help needed with java script menu

gogo1 · February 11, 2007

Hi all i really need some help

I have a website which consists 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. but i 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

<!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

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

fenway · February 11, 2007

Please be a little more specific...

gogo1 · February 12, 2007

Hello

bascially its a vertical expanding drop down menu, it has menu items which each have sub menu items. when you select a menu item the sub menu expands (when adding a link to these it works fine) as soon as i try to add a link to the actualy menu item, the sub items do not display and the link doesnt work.

Thanks

Corinne

fenway · February 13, 2007

So it doesn't drop down?

gogo1 · February 13, 2007

hiya

It drops down fine when there isnt a link on the main menu item, as soon as i put a link on the main item the sub menu will not appear and the ones below seem to become disabled too.

Thanks

Gogo

fenway · February 13, 2007

That's probably because there's an onclick to show/collapse the sub-menu, but as soon as you put the link, the href gets overridden.

Sign In

Real help needed with java script menu

Recommended Posts

gogo1

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

gogo1

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

gogo1

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information