JDNAPVALLEY

Accordion Navs

by Apple Ilagan

HTML

<div class="navcon">
<div id="nav_acc">
<ul id="menu-main" class="menu"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-14"><a href="http://www.jdnapavalley.com/">Home</a></li>
<li id="menu-item-57" class="primary menu-item menu-item-type-custom menu-item-object-custom menu-item-57"><a href="http://jdnapavalley.idxbroker.com/idx/featured">Featured Listings</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="http://jdnapavalley.idxbroker.com/idx/search/basic">Search Properties</a></li>
<li id="menu-item-421" class="cursor-nav menu-item menu-item-type-post_type menu-item-object-page menu-item-421"><a href"#">Communities HAVE SUBMENU</a>
<ul class="sub-menu">
	<li id="menu-item-199" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-199"><a href="http://jdnapavalley.idxbroker.com/i/napa">Napa</a></li>
	<li id="menu-item-200" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-200"><a href="http://jdnapavalley.idxbroker.com/i/yountville">Yountville</a></li>
	<li id="menu-item-201" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-201"><a href="http://jdnapavalley.idxbroker.com/i/rutherford">Rutherford</a></li>
	<li id="menu-item-202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-202"><a href="http://jdnapavalley.idxbroker.com/i/st-helena">St. Helena</a></li>
	<li id="menu-item-203" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-203"><a href="http://jdnapavalley.idxbroker.com/i/calistoga">Calistoga</a></li>
</ul>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://www.jdnapavalley.com/calistoga-ranch/">Calistoga Ranch</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page...

CSS

#nav_acc {
	padding: 0;
	width: 210px;
	text-align:center; 
text-transform:uppercase;
font-family: 'Questrial', sans-serif;
font-size:14px;
font-weight:normal;
}
#nav_acc a {
	color: #333;
	text-decoration:none;
	padding:5px;
    display:block;
}
#nav_acc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
	width: 210px;
}
#nav_acc li {
	cursor: pointer;
	padding:0;
	margin: 0;
	text-indent: 0;
}
#nav_acc li:hover {
}
#nav_acc li.on {
}
#nav_acc ul ul {
	padding:0;
	margin: 0;
	text-indent: 0;
}
#nav_acc ul li li {
	color: #333;
	text-indent: 0;
	margin: 0;
	padding: 0
}
#nav_acc li li:hover {
	background: 0
}
#nav_acc ul li.current_page_item, 
#nav_acc ul li.current-menu-ancestor, 
#nav_acc ul li.current-menu-item, 
#nav_acc ul li.current-menu-parent {
	color: #333;

}
* html #nav_acc ul li.current_page_item, 
* html #nav_acc ul li.current-menu-ancestor, 
* html #nav_acc ul li.current-menu-item, 
* html #nav_acc ul li.current-menu-parent, 
* html #nav_acc ul li a:hover {
	color: #333;

}
#nav_acc ul li li.current_page_item, #nav_acc ul li li.current-menu-ancestor, #nav_acc ul li li.current-menu-item, #nav_acc ul li li.current-menu-parent {
	color: #333;

}
* html #nav_acc ul li li.current_page_item, 
* html #nav_acc ul li li.current-menu-ancestor, 
* html #nav_acc ul li li.current-menu-item, 
* html #nav_acc ul li li.current-menu-parent, 
* html #nav_acc ul li li a:hover {
	color: #333;

}
.sub-menu a {
}
.sub-menu a:hover {
}

JavaScript

jQuery(document).ready(function($) {

jQuery('#nav_acc #menu-main > li > a').click( function(e) {
		if ( jQuery(this).parent().find('.sub-menu').length > 0 ) { e.preventDefault(); }
});
    
	 
$('#nav_acc #menu-main > li > a').click(function() {
		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('#nav_acc #menu-main > li').removeClass('on');	  
	 	$('#nav_acc #menu-main ul').slideUp('normal');
			$(this).parent().addClass('on');
			//OPEN THE SLIDE
			$(this).parent().find("ul").slideDown('normal');
		  
	 });

$('#nav_acc #menu-main > li').mouseover(function() {
		$(this).addClass('over');

	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
$('#nav_acc ul ul').hide();
	
	//Show submenu having the current page
	//$('.sub-menu li.current-menu-item').parent().css('display', 'block'); 
	$('#nav_acc ul li.current-menu-item').find('.sub-menu').css('display', 'block'); 
	$('#nav_acc ul li li.current-menu-item').parent().css('display', 'block'); 

});