Jquey Mrnu

Accordian Menu

by akshaydesai

HTML

<ul class="menu">

	<li><div><a href="#">PRODUCTS</a></div>
		<ul>
			<li><a href="#">Scada Software</a></li>
			<li><a href="#">Energy Monitoring</a></li>
			<li><a href="#">Tension Monitoring</a></li>
			<li><a href="#">Protocol Gateways</a></li>
		    <li><a href="#">Gas Monitoring</a></li>
								<li><a href="#">Led Display</a></li>
							</ul>
						</li>

					<li><div><a href="#">SOLUTIONS</a></div>
							<ul>
								<li><a href="#">Power & energy</a></li>
								<li><a href="#">Process Automation</a></li>
								<li><a href="#">Medical Diagnostics</a></li>
								<li><a href="#">Machine Tools</a></li>
								<li><a href="#">Remote Monitoring</a></li>
								<li><a href="#">Industries</a></li>
							</ul>
						</li>

					<li><div><a href="#">OUR EXPERTISE</a></div></li>
					<li><div><a href="#">ABOUT US</a></div></li>
					<li><div><a href="#">CONTACT US</a></div></li>
					
				</ul>

CSS

.menu a{

	color: #4c4c4c;

}
.menu
{
	margin-top: -10px;
	margin-left: -30px;
	padding:15px;
	list-style-type: none;
	font-weight: bold;
	font-size: 18px;
	width: 200px;
/*	background-color: rgba(99,99,99,0.4);*/
}

.menu ul li
{
	margin-left: -7px;
	font-size: 13px;
	letter-spacing: 2px;
	line-height: 1;
	color: #4c4c4c;

}

.menu ul
{
	margin-left: -30px;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
	line-height: 1;
	position: relative;
	list-style-type: none;
	color: #4c4c4c;
}

 .menu li
{

	margin: 15px 0px 0px 15px;
}

.menu ul{

	display: none;
}

.menu :hover
{
	color: #d91e48;
}
.menu ul li :hover
{
	color: #d91e48;
}

JavaScript

$(document).ready(function(){

$(".menu > li > div").click(function(){
 
    if(false == $(this).next().is(':visible')) {
        $('.menu ul').slideUp(700);
    }
    $(this).next().slideToggle(700);
});

	var url = window.location.href;
	var $current = $('.menu li ul a[href="' + url + '"]');
	$current.parents('.menu ul').slideToggle();
	$current.next('.menu ul').slideToggle();

});