I encountered an issue with a menu I created using jQuery. When clicking on a submenu, the site refreshes and then the menu does not remain in the active state. I want it to stay active showing its menu and submenu when clicked. I have also created a fiddle here.
<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>
.menu ul{
text-align:justify;
width:300px;
min-width:500px;
margin-top:60px;
}
.menu ul:after{
content:'';
display:inline-block;
width:100%;
}
.menu ul li{
display:inline-block;
list-style:none;
white-space:nowrap;
margin:0;
padding:0;
}
.menu ul li a{
text-decoration:none;
color:#000;
}
.menu ul li:hover a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu ul li:hover ul li a{
color:#000;
border:none;
margin-right:25px;
}
.menu ul li:hover ul li:hover a{
color:#CCCC00;
}
.menu li.active a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu li.active ul li a{
color:#000;
margin-right:25px;
border-bottom:none;
}
.menu li.active ul li:hover a{
color:#CCCC00;
margin-right:25px;
}
.hide{
display:none;
}
$(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();
});