SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    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
    6,048
    Mentioned
    219 Post(s)
    Tagged
    12 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
    77
    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
    6,048
    Mentioned
    219 Post(s)
    Tagged
    12 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
  •