SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Slidedown menu

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slidedown menu

    Hi,

    I have a Horizontal menu such that when you point your mouse over a link say; "Info" it then displays more sub links. At the moment it displays all sublinks at the same time, but what i want is to display each sublink as slide down but per link. e.g.

    Info <<<<<<<<<<<<<<main link

    about us<<<<<<<<<<<sublink
    job oppertunities<<<<<sublink

    what i want is when mouse is over info, to first display "about us" after 1 or 2 seconds display job oppertunities.

    My code:
    CSS & JavaScript
    PHP Code:

    #nav, #nav ul { /* all lists */
        
    margin:0;
        list-
    stylenone;
        
    line-height1;
    }

    #nav a {
        
    displayblock;/*display sub below main menu*/
        
    width9em;
        
    padding-top:2px;
    }

    #nav li { /* all list items */
        
    floatright;
        
    width6em;

        
        
    }

    #nav li ul { /* second-level lists */
        
    positionabsolute/*hide sub content, display whem mouse over*/ 
        
    width9em;
        
    font-size:12px;
        list-
    style-typenone;
        
    left: -999em;
        
    }

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
        
    leftauto;
        
    }

    #content {
        
    clearleft;
    }

    </
    style>


    <
    script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
        var 
    sfEls document.getElementById("nav").getElementsByTagName("LI");
        for (var 
    i=0i<sfEls.lengthi++) {
            
    sfEls[i].onmouseover=function() {
                
    this.className+=" sfhover";
            }
            
    sfEls[i].onmouseout=function() {
                
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (
    window.attachEventwindow.attachEvent("onload"sfHover);

    //--><!]]></script> 
    html code:

    PHP Code:

    <td height="52">
           <
    ul id="nav">
               <
    li>
       <
    font face="Tahoma" size="2">
       <
    a href="#" style="text-decoration: none; font-weight:700">
       <
    font color="#FF9966">SOLUTIONS</font></a></font>
            <
    ul>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">Web Development</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">Web Design</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">E-Commerce</font></a></li>
                
            </
    ul>
        </
    li>
        <
    li>
       <
    font face="Tahoma" size="2">
       <
    a href="#" style="text-decoration: none; font-weight:700">
       <
    font color="#FF9966">PORTFOLIO</font></a></font>
            <
    ul>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">Web Development</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">Web Design</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">E-Commerce</font></a></li>
                
            </
    ul>
        </
    li>
    <
    li>
       <
    font face="Tahoma" size="2">
       <
    a href="#" style="text-decoration: none; font-weight:700">
       <
    font color="#FF9966">ABOUT US</font></a></font>
            <
    ul>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">About</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">Objective</font></a></li>
                <
    li><a href="#" style="text-decoration: none; font-weight:700">
                <
    font color="#FF9966">E-Commerce</font></a></li>
                
            </
    ul>
        </
    li>
       
          </
    ul>
         </
    div>
        
       </
    td

    cheers

  2. #2
    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)
    Do you mean, if there are 10 items in a menu then the user will have to wait for 10 seconds just to see all the menu's contents? Eeek!

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no i dont mean that. i dont want the entire submenu to display all at once. i want each item in the submenu to display one at a time. i dont know how else to explain this, but the menu on this link does what i want:

    http://www.iwebsolutions.co.uk/

    thanks
    Last edited by ma201dq; Sep 10, 2006 at 01:58.

  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)
    You are seeing a Flash menu, however it could also be done with DHTML.

    That site is designed pretty well. Notice that if you disable Flash support you then get a CSS List menu. Pretty nice work.

    Look at their source code to see what they are doing.


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
  •