Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: javascript menu

  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript menu

    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

  • #2
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone please help with this, ive tried so many resouces but had no luck

  • #3
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    whats ur problem? u want the main menu item to expand as well as load a page in the content frame?

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi gogo1,

    For your menu html structure I suggest you use something like I used in this demo: xTreeMenu, which is similar to what you are using but has main menu items like this:
    Code:
    <li><a href='aUrl'>top level item (a "label")</a></li>
    Now your script can access the href when the item is clicked. It can load that href into the right frame and then expand the menu. Additionally, the menu is now closer to working when Js is disabled.

    Btw... Welcome to Coding Forums
    Last edited by MikeFoster; 02-12-2007 at 08:08 PM.

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello

    Thank you very much for your response and the welcome to coding forums

    I tried what you sugested but still no luck, the link opens in the right frame but menu does not expand and the rest of the menu below seems to be disabled. I may be doing it wrong tho with my experience

    Any more ideas ?

    Thanks again

    gogo
    Last edited by gogo1; 02-13-2007 at 02:42 PM.

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    shyam

    yeah thats exactly what im after

    gogo

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Show us your code.

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hello

    i put it in my first post, i havent got the site uploaded yet.

    gogo

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:
    Code:
    // (mf) I made no changes to code above this line.
    
    // Menu Functions & Properties
    
    var activeA = null;
    
    function showMenu() {
      var ol, li;
      if(activeA){
        li = activeA.parentNode;
        if (li) li.className = "";
        ol = getNextSibling(activeA, 'ol');
        if (ol) ol.style.display = "none";
      }
      if(this == activeA){
        activeA = null;
      } else {
        activeA = this;
        li = activeA.parentNode;
        if (li) li.className = "active";
        ol = getNextSibling(this, 'ol');
        if (ol) ol.style.display = "block";
      }
    }
    
    function initMenu(){
      var menus, menu, a, i;
      menus = getChildrenByElement(document.getElementById("menu"));
      for(i = 0; i < menus.length; i++){
        menu = menus[i];
        a = getFirstChild(menu, 'a');
        if (a) a.onclick = showMenu;
      }
      a = document.getElementById("menu").getElementsByTagName('a');
      for (i = 0; i < a.length; ++i) {
        a[i].target = 'rightFrame';           // (mf) Assumes name of right frame !!!
      }
    }
    
    if(document.createElement) window.onload = initMenu;
    
    </script>
    </head>
    
    <body>
    
    <!-- (mf) I made several changes to the menu html.
    The main items are now wrapped in 'A' elements.
    You'll need to make the corresponding changes to your CSS. -->
    
    <div class ="contentmenu">
      <ul id="menu">
        <li><a href='index.html'>Home</a></li>
        <li><a href='eggs.html'>Eggs</a>
          <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><a href='ham.html'>Ham</a>
          <ol>
            <li><a href=''>ham1</a></li>
            <li><a href=''>ham2</a></li>
            <li><a href=''>ham3</a></li>
            <li><a href=''>ham4</a></li>
            <li><a href=''>ham5</a></li>
          </ol>
        </li>
        <li><a href='links.html'>Links</a>
          <ol>
            <li><a href=''>link1</a></li>
            <li><a href=''>link2</a></li>
            <li><a href=''>link3</a></li>
          </ol>
        </li>
      </ul>
    </div>
    
    </body>
    </html>
    Some things to note:

    1. The main items are now wrapped in 'A' elements.

    2. activeA now points to the 'A' clicked - not its parent 'LI'.

    3. During initialization it sets the 'target' attribute of all 'A' elements contained in 'menu' to the name of the right frame. Change this to the name you are using for your right frame. Actually, this should be hard-coded in the html so the menu will load its links into the right frame even when Js is disabled.
    Last edited by MikeFoster; 02-13-2007 at 09:57 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •