Home > Categories > Navigations > JQuery slide down menu

JQuery slide down menu

 

The JQuery slide down menu is composed of a number of li headers.
Upon clicking these headers, its menu items are revealed with a sliding DHTML effect.

JQuery code




ScriptBreaker.com :: JQuery slide down menu


<script language="JavaScript">
$(document).ready(function() {

	//avoid jumping to the top of the page when the href is an #
	$("ul.topnav > li").each(function(index) {
		if($(this).find("ul.subnav").size() != 0){
			if($(this).find("a:first-child").attr('href') == "#"){
	  			$(this).click(function(){return false;});
	  		}
		}
	});
	
	$("ul.topnav li").click(function() { //When trigger is clicked...
		//Do nothing when the list is open
		if(!$(this).find("ul.subnav").is(':visible')){
			$(this).parent().find("ul.subnav").slideUp('fast');	
			$(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
		}
	});
});

 Download full sourcecode

Add a comment...