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

JavaScript
1

Hi guys!

I’ve created a drop down menu (with the help of you legends on here! :wink: )…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…



	<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…



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

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.

<!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

Hi Pullo!
That’s fantastic, everything works perfectly. Thank you so much, I really appreciate your help - top shooter :slight_smile:
Thank you again!
SM

4

You’re welcome!
Thanks for taking the time to follow up.