Jump to content

jQuery slide down problem


Recommended Posts

I am working on a drop down sub menu from a horizontal main navigation.


when i hover over a link i want the sub menu to slide down, which it is, however i'm having 2 problems:


1. For a second or two at first the animation does not work and the list simply appears and disappears in accordance with the CSS, instead of sliding instantly. Is this because it uses the CSS rules until the DOM is ready?


2. When the menu slides down, it's width is too narrow until it slides all the way down at which point it widens fullly.


I have set the ul and list items to 125px wide, so i don't know why the jquery is keeping it narrow?




California '06
New Zealand
California 2010
New York City

About Me
Contact Me




/* sub menu */

   #wrapper #top #nav li ul#drop_travels
       display : none;
       width : 125px;
       margin : 0;
       padding : 0;
       list-style-position : inside;
       list-style-type : none;
       position : absolute;
       top : auto;
       left : 0;

   #wrapper #top #nav li:hover ul#drop_travels
       display : block;

   #wrapper #top #nav li #drop_travels li
       margin : 0;
       width : 125px;

   #wrapper #top #nav li #drop_travels li a
       display : block;
       width : 125px;
       height : 28px;
       background : url("../Images/nav_drop_li_bg.png") top left no-repeat;
       padding-left : 5px;
       padding-top : 4px; /*Move text down*/
       margin-bottom : -4px; /*Correct so no gap between items shows*/

   #wrapper #top #nav li #drop_travels li a.top
       background : url("../Images/nav_drop_li_top_bg.png") top left no-repeat;

   #wrapper #top #nav li #drop_travels li a.bottom
       background : url("../Images/nav_drop_li_bottom_bg.png") top left no-repeat;




   $('#wrapper #top #nav li ul#drop_travels').width('125px');

   $('#wrapper #top #nav li a.drop').hover(
           $('#wrapper #top #nav li ul#drop_travels').slideDown();

      function(){ $('#wrapper #top #nav li ul#drop_travels').slideUp(); }     



Any idea?

Link to comment
Share on other sites

#wrapper #top #nav li:hover ul#drop_travels
   display: block;


You need to change the above in your css to display:none then the animation will run on first hover.


As for the width I can't say much as I don't see the glitch when I run the example you posted. Maybe try to post the full CSS and HTML code or give me an example page online.

Link to comment
Share on other sites

About the non-javascript browsers:


You can set the Display:none using javascript so that when non-javascript browsers open that page the sub-menu is still visible.


$('#wrapper #top #nav li ul#drop_travels').css("display","none");


About the delay in sliding animation:


You can use a jQuery plugin called hoverIntent. It holds the execution of the code until the user has moved and stopped his/her mouse.


It's really easy to implement it, just call the


Then instead of the normal ".hover":



you use

$("#myElement").hoverIntent(function(){   //Do something on hover}, function(){  //Do something on mouse leave });

(Notice the word hoverIntent instead of hover)


You can download the hoverIntent plugin and/or read the documentation from: http:// cherne.net/brian/resources/jquery.hoverIntent.html


or just search google :)

Link to comment
Share on other sites

thanks so much beedev for your help.


i understand what you are saying about the widths of the elements, and have edited them as to your recommendations, but it is still giving me problems. the same thing is happening in Mozilla 3.5 for Mac, Safari 3 and Chrome for Mac. not yet tested in IE.


i assume you have tested my code? is it fixed your end by just updating the widths to the

  • tags.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...