SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Made a drop down menu. How can I get the drop down to fade in and out?

    Hi guys!

    I've created a drop down menu (with the help of you legends on here! )...Now I just need it to animate so when the user hovers over the main menu item, the drop down fades in.

    Here's the HTML I have...

    Code:
    	<ul id="nav">
    		<li><a href="#">Nav 1</a></li>
    		<li><a href="#">Nav 2</a></li>
    		<li><a href="#">Nav 3</a>
                <ul>
                    <li><a href="#">&raquo; Sub Menu 1</a></li>
                    <li><a href="#">&raquo; Sub Menu 2</a></li>
                    <li><a href="#">&raquo; Sub Menu 3</a></li>
                    <li><a href="#">&raquo; Sub Menu 4</a></li>
                </ul>
            </li>
    		<li><a href="#">Nav 5</a></li>
    		<li><a href="#">Nav 6</a></li>
    	</ul>
    ...and here's my CSS...

    Code:
    ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; z-index:999;}
    ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
    ul#nav li a {color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}
    
    * html #nav li {display:inline; float:left; }  /* for IE 6 */
    * + html #nav li {display:inline; float:left; }  /* for IE 7 */
    
    #nav ul {width:208px; left:-9999em; list-style:none; margin:35px 0; padding:0; position:absolute; z-index:999;}
    #nav li:hover ul {left:auto;}
    
    #nav li {float:left;}
    #nav li li a {width:190px; background-color:#efefef; color:#2e2e2e; padding:8px; margin:0; }
    #nav li li a:hover {background-color:#000; background-image:none; color:#FFF;}
    
    #nav li:hover {background:url(assets/images/frame/navOn.jpg);}
    From what I can make out, I assume I need either Javascript or JQuery...

    Does anyone know how I can get the drop down to fade in and out?

    Thank you very much and I hope to hear from you.

    SM

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    I wrote you a little jQuery function to do what you requested.
    Hopefully it is quite self-explanatory, but if you have any questions, let me know.

    HTML 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=utf-8" />
        <title>Menu fade in/out example</title>
        <style>
          ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; z-index:999;}
          ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
          ul#nav li a {color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}
          
          * html #nav li {display:inline; float:left; }  /* for IE 6 */
          * + html #nav li {display:inline; float:left; }  /* for IE 7 */
          
          #nav ul {width:208px; left:-9999em; list-style:none; margin:35px 0; padding:0; position:absolute; z-index:999;}
          #nav li:hover ul {left:auto;}
          #nav li {float:left;}
          #nav li li a {width:190px; background-color:#efefef; color:#2e2e2e; padding:8px; margin:0; }
          #nav li li a:hover {background-color:#000; background-image:none; color:#FFF;}
          #nav li:hover {background:url(assets/images/frame/navOn.jpg);}
        </style>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <ul id="nav">
          <li><a href="#">Nav 1</a></li>
          <li><a href="#">Nav 2</a></li>
          <li>
            <a href="#">Nav 3</a>
            <ul>
              <li><a href="#">&raquo; Sub Menu 1</a></li>
              <li><a href="#">&raquo; Sub Menu 2</a></li>
              <li><a href="#">&raquo; Sub Menu 3</a></li>
              <li><a href="#">&raquo; Sub Menu 4</a></li>
            </ul>
          </li>
          <li><a href="#">Nav 5</a></li>
          <li><a href="#">Nav 6</a></li>
        </ul>
        
        <script>
          $(document).ready(function() {
            $("#nav > li:has(ul)").mouseenter(function(){
              $(this).children("ul").css("display", "none");
              $(this).children("ul").css("left", "auto").fadeIn('slow');
            }).mouseleave(function(){
              $(this).children("ul").delay(300).fadeOut('slow', function() {
                $(this).children("ul").css("left", "-9999em");
              });
            });
          });
        </script>
      </body>
    </html>
    N.B. I added a short delay before the fadeOut effect kicks in. I also left your CSS in place so that this works for people with JavaScript disabled.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo!
    That's fantastic, everything works perfectly. Thank you so much, I really appreciate your help - top shooter
    Thank you again!
    SM

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    You're welcome!
    Thanks for taking the time to follow up.


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
  •