need help changing to a specific subnav based on the nav selected

Discussion in 'JavaScript' started by stevemtno, Dec 8, 2008.

  1. #1
    I'm working on a 2 level menu for our website. I'm close, but I have a (hopefully) minor issue to fix. I want to display a specific submenu based on the primary menu item selected. For example, if you click on Entertainment, I want to display the Entertainment subnav.

    Here's a link to the test page I'm working on:
    http://newsroom2.stltoday.com/stltoday/pages.nsf/9C2225A4C505CC768625692100045EE4/DA88147CF8A02B03862575130066A927?OpenDocument

    Thanks in advance!

    Steve
     
    stevemtno, Dec 8, 2008 IP
  2. rene7705

    rene7705 Peon

    Messages:
    233
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    iigtc you want to display a menu when ppl hover their mouse over the bottom line of menu-items, right?

    A menu with unlimited levels is hard to achieve, but your page (at time of writing) had just 2 lines of menu-items. Items on the 2nd line changed when a item on the 1st line was hovered over. Suppose you wanted to display a menu under the 2nd line when an item on the 2nd line was hovered over, you could use this;

    that can be achieved using an <div id='x' class="y" style="position:absolute">, which you set to the correct stop with a line of javascript;
    
    function 2ndLineMenuItemSelected(element,evnt) {
      var menu = document.getElementById('x');
      switch (element.id) {
         case 'someID': menu.innerHTML = 'MENU CONTENT FOR THIS 2ND LINE ITEM'; break;
      }
      menu.style.left = element.offsetLeft;
      menu.style.display = 'block';
    }
    function 2ndLineMenuItemDeSelected(element,evnt) {
      var menu = document.getElementById('x');
      menu.style.display = 'none';
    }
    
    Code (markup):
    this function has to be tied to the click of the 2nd line menu item in;
    
    <div class="2ndLineMenuItem" onmouseover="2ndLineMenuItemSelected(this,event);" onmouseout="2ndLineMenuItemDeSelected(this,event)"
    >
    
    Code (markup):
    but it seems now the page has changed already to display a nice menu..
     
    rene7705, Dec 8, 2008 IP
  3. stevemtno

    stevemtno Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    No, there is only going to be 2 lines to the menu. Each link on the submenu will link to another page, but that's as far as it goes.

    The only other thing I need to do is keep the tab color on the primary tab you clicked on. For example, if you click on the Entertainment tab, I need the Entertainment subnav to display and the Entertainment tab on the primary menu needs to change to green (or some other color) to signify that you're in the Entertainment section of the site.

    Hope that makes things a little clearer...

    Steve
     
    stevemtno, Dec 9, 2008 IP