Reputation: 2896
I have the following jquery code for my drop down menu:
var active = 0;
$(document).ready(function(){
jQuery("#dropmenu ul").css({display:"none"});
// For 1 Level
jQuery("#dropmenu li:has(ul) a").append('');
jQuery("#dropmenu li ul a span").text('');
// For 2 Level
jQuery("#dropmenu li ul li:has(ul) a").append('');
jQuery("#dropmenu li ul li ul a span").text('');
jQuery("#dropmenu li").hover(function(){
if(active != 1){
jQuery($('.active').parent()).find("ul:first").css('display', 'none');
jQuery(this).find("ul:first").fadeIn('fast');
active = 1;
}
},
function(){
jQuery(this).find("ul:first").fadeOut('fast');
jQuery($('.active').parent()).find("ul:first").fadeIn('fast');
active = 0;
}); });
//ACTIVATE
$(document).ready(function(){
jQuery($('.active').parent()).find("ul:first").css('display', 'block');
});
What the code is suppose to do is check and see which element has an active
class and show it when the page loads.
The HTML looks something like this:
<ul id="dropmenu">
<li><a class="active" href="index.php">home</a>
<ul>
<li><a href="#">Euro 2012</a></li>
<li><a href="#">FIA Cup</a></li>
<li><a href="#">Previous Events</a></li>
<li><a href="#">Event 2012-2013</a></li>
<li class="last"><a href="#">Pre Season</a></li>
</ul>
</li>
<li><a href="#" >home</a></li>
<li><a href="#">blabl</a></li>
<li><a href="#">dropdown</a>
<ul>
<li><a href="#">Euro 2012</a></li>
<li><a href="#">FIA Cup</a></li>
<li><a href="#">Previous Events</a></li>
<li><a href="#">Event 2012-2013</a></li>
<li class="last"><a href="#">Pre Season</a></li>
</ul>
</li>
<!-- ... -->
</ul>
right now when the page loads the default drop down is shown however once you hover over other menu items if they dont have a drop down menu it shows the default one and hides, and if you quickly go over the the menu item it will keep repeating the animation. How can I avoid the repetition of the animation and how can I avoid showing the default menu when the menu is empty?
Upvotes: 0
Views: 419
Reputation: 1850
I say scrap this and look for scripts that do that, there are plenty if you just take the time to google, here is a useful link :
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus
I personally use this plugin to make dropdown menus:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
You can do a lot with this plugin with a little help of html and css to make a row of dropdown menus... The plugin uses jQuery and jQuery UI for the design, you can custom it however you want, here is the link to the jQueryUI website if you haven't been there: http://www.jqueryui.com/themeroller
Upvotes: 1