SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping submenu visibly?!?

    I'm trying to figure this out... I have a menu with a horizontal submenu. What I want is for the submenu to stay active if the mainmenu link is activated... This I got so far. Now what I cant figure out is how to make the active submenu hide when hovering over the other mainmenu links... And show again when not hovering...

    Here is what I have tryid so far:
    Code CSS:
    #navbar {
       top: 0;
       left: 0;
       margin: 0;
       padding: 0;}
    #navbar li {
       list-style: none;
       float: left; }
    #navbar li a {
       display: block;
       padding: 3px 8px;
       text-transform: uppercase;
       text-decoration: none; 
       color: #999;
       font-weight: bold; }
    #navbar li a:hover {
       color: #000; }
    #navbar li ul {
       display: none;  }
    #navbar li:hover ul, #navbar li.hover ul {
       /*position: absolute;*/
       display: inline;
       /*left: 0;*/
       width: 100%;
       margin: 0;
       padding: 0; }
    #navbar li:hover li, #navbar li.hover li {
       float: left; }
    #navbar li:hover li a, #navbar li.hover li a {
       color: #000; }
    #navbar li li a:hover {
       color: #357; }
    #navbar li:hover ul, #navbar li.hover ul, #navbar li ul.active {
       position: absolute;
       display: inline;
       left: 0;
       width: 100%;
       margin: 0;
       padding: 0;
    }

    Javascript:
    Code JavaScript:
    function setVisibility(id, visibility) {
    	document.getElementById(id).style.display = visibility;
    }

    And the php:
    PHP Code:
    $currPage $_GET['page'];

    $startTab = array('start','mypage');
    $infoTab = array('info','about','contact');

    if(
    in_array($currPage$startTab)){
        
    $currID 'start';
    } elseif(
    in_array($currPage$infoTab)){
        
    $currID 'info';
    }
                            

    echo 
    '<ul id="navbar"> ';
        echo 
    '<li><a href="TEST_menu2.php?page=start" onMouseOver="setVisibility(\'$currID\', \'none\');" onMouseOut="setVisibility(\'$currID\', \'inline\');">Start</a>'
            if(
    in_array($currPage$startTab)){
                echo 
    '<ul id="start" class="active">';
            } else {
                echo 
    '<ul id="start">';
            }
               echo 
    '<li><a href="TEST_menu2.php?page=mypage">My Page</a></li> 
            </ul> 
        </li>'
    ;
        echo 
    '<li><a href="TEST_menu2.php?page=info" onMouseOver="setVisibility(\'$currID\', \'none\');" onMouseOut="setVisibility(\'$currID\', \'inline\');">Info</a>'
            if(
    in_array($currPage$infoTab)){
                echo 
    '<ul id="info" class="active">';
            } else {
                echo 
    '<ul id="info">';
            }
               echo 
    '<li><a href="TEST_menu2.php?page=about">About Us</a></li> 
               <li><a href="TEST_menu2.php?page=contact">Contact</a></li> 
            </ul>          
        </li> 
    </ul>'

    Now this allmost does the part except hidding the active submenu when hovering... Can somebody please help me... Its tearing me apart

  2. #2
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have an idea that this:
    PHP Code:
    if(in_array($currPage$startTab)){
                echo 
    '<ul id="start" class="active">';
            } else {
                echo 
    '<ul id="start">';
            } 
    Should be handled inside the javascript, but not sure how?!?!?

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mayby something about changing class onmouseover?!?! I'm not that good on javascript so please help :-)


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
  •