Matthew Vaccaro

jQuery Simply Slide Menu

Using jQuery, sub-menus slide down from a horizontal navigation span. This is extremely primitive and simple, I haven’t revisited it yet but it works!

CSS Code:

header {

        z-index: 9999;

}

#locations-drop,
#contact-drop {
	display: none;
	z-index: 9998;
}

HTML Code:

<header>
	<h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?></a></h1>
	<ul id="nav">
	  <li class="current"><a href="<?php bloginfo( 'url' ); ?>">Home</a></li>
	  <li><a href="<?php bloginfo( 'url' ); ?>" id="the-locations">Locations</a></li>
	  <li><a href="<?php bloginfo( 'url' ); ?>" id="contact-button">Contact Us</a></li>
	</ul>
</header>

jQuery Code:

$(document).ready(function(){
	$('#the-locations').click(
	  function () {
	    $('#locations-drop').stop().animate({display:'block'}).slideDown(1000);
	  },
	  function () {
	    $('#locations-drop').slideUp();
	  });
	$('#contact-button').click(
	  function () {
	    $('#contact-drop').stop().animate({display:'block'}).slideDown(1000);
	  },
	  function () {
	    $('#contact-drop').slideUp();
	  });
});