Jump to content
Killersites Community
Sign in to follow this  
ll87

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?

 

HTML:



Home
Travels

California '06
Thailand
Malaysia
Singapore
Australia
New Zealand
California 2010
Vancouver
New York City



About Me
Portfolio
Contact Me

 

CSS:

 

/* 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;
   }

 

jQuery:

$(document).ready(function(){

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

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

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

   );
});

 

Any idea?

Share this post


Link to post
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.

Share this post


Link to post
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":

$("#myElement").hover(function....

 

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 :)

Share this post


Link to post
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

and
  • tags.

Share this post


Link to post
Share on other sites

Have you removed the following code from your Javascript?

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

 

I tested it and only setting 145px width to the UL fixes the problem.

Share this post


Link to post
Share on other sites

yea this is!

 

today ive been trying to work out how to modify an existing pagination script for my image gallery. take a look at that if u need to quench your problem solving thirst :P

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×