SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 level tab menu display

    I'm working on a tab menu that has secondary level links. An example is here: http://pixelmagicdesign.com/working/menuTest.html

    When a page is displayed with the selected tab, it needs to display the sub menu options, but I need to hide them if another tab if moused over so the sub menu links do not display over the top of the current links. Does anyone know how this can be done? Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In line 40 you are missing id attribute, so that's why link2 is always on. Add
    <ul id="smenu2">

  3. #3
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the sub-links to display on this page, but then disappear and the show the sub links when I mouse over the other tabs. If I add the id attribute, the links will display only on mouseover. Anyone else have any ideas how to achieve this?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a suggestion based on bosko's idea. Let all the smenus have IDs. Then something like this:
    Code:
    window.onload=montre;
    var thisPgTab = 'smenu2'; // use some way of indicating the tab for this page
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    else document.getElementById(thisPgTab).style.display = 'block';
    }
    And then in each "tab" LI add the onmouseout handler:
    Code:
    <li class="first" onmouseover="montre('smenu1');" onmouseout="montre()"><a href="#">Link 1</a>

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw... you've got a nice site going there. I like your design

  6. #6
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help and your kind words. Your fix works beautifully!


Bookmarks

Posting Permissions

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