ll87 Posted December 15, 2009 Report Share Posted December 15, 2009 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? Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 16, 2009 Report Share Posted December 16, 2009 #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. Quote Link to comment Share on other sites More sharing options...
ll87 Posted December 16, 2009 Author Report Share Posted December 16, 2009 Home Travels California '06 Thailand Malaysia Singapore Australia New Zealand California 2010 Vancouver New York City About Me Portfolio Contact Me Site under construction 2009 © Alex Barron - All Rights Reserved Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 16, 2009 Report Share Posted December 16, 2009 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 Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 16, 2009 Report Share Posted December 16, 2009 (edited) Sorry i think I misunderstood your 2nd question about the menu disappearing. I can see that the sub-menu disappears when you try to hover over it. So all you need to do is just apply the class "drop" to the parent tag, and also make the necessary adjustments to your javascript, because the is expanding down together with the submenu, but the tag isn't. I can somewhat understand why you're getting the width error. The reason (Bear with me as I try to explain): The menu unordered list ( ) is 125px wide. The list-item () are also 125px wide with 15px left padding. That makes the tags total width: 125+15 = 140px. So if the inside item is larger than the container, then the container expands on some browsers (well.. maybe ONLY internet explorer .... what browser are you seeing this "expanding" behavior on? Also the anchors ( The solution: Increase the width on your and also tags to contain the widths of the elements inside it. So your tag should have a width of 130px, your tag should have 130+15 = 145px width. Hope you understood, if not try to read up on CSS Box model which explains how block elements work, how padding & margins affect the width etc. Edited December 16, 2009 by BeeDev Quote Link to comment Share on other sites More sharing options...
ll87 Posted December 16, 2009 Author Report Share Posted December 16, 2009 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 17, 2009 Report Share Posted December 17, 2009 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. Quote Link to comment Share on other sites More sharing options...
ll87 Posted December 17, 2009 Author Report Share Posted December 17, 2009 duhhhh, thanks! Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 17, 2009 Report Share Posted December 17, 2009 Welcome, so it's all fixed now? Quote Link to comment Share on other sites More sharing options...
ll87 Posted December 17, 2009 Author Report Share Posted December 17, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.