I've created a menu where if the user clicks on one of the side menu items then the side menu and the side menu children are all displayed, but the problem I have is that all my menu items are bold instead of the selected child and it's parent.
I hope I explained this clearly,
My HTML
<div id="second-menu" class="collapse navbar-collapse menu_two">
<ul class="nav navbar-nav inside-nav">
<li class="sub_menu">
<a href="#">Section 1</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item sidenavlast">
<a href="#">Section 2</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="#">Section 3</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="#">Section 4</a>
</li>
<li class="sidenav_active">
<a href="#">Section 5</a>
</li>
<li class="sidenav_item">
<a href="#">Section 6</a>
</li>
<li class="sidenav_item sidenavlast">
<a href="#">Section 7</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="#">Section 8</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="#">Section 9</a>
</li>
<li class="sidenav_item">
<a href="#">Section 10</a>
</li>
<li class="sidenav_item sidenavlast">
<a href="#">Section 11</a>
</li>
</ul>
</li>
</ul>
</div>
My JS
$('ul.navbar-nav li').hover(
function () {
$(this).find('.sidenav_wrapper:first').css('display', 'block');
},
function () {
$(this).find('.sidenav_wrapper:first').css('display', 'none');
});
$(".sidenav_active").parent().css({
"display": "block"
});
if ($('.sidenav_active').length > 0) {
$('.sidenav_wrapper').parent().find('a').css({
"font-weight": "700"
});
}
My CSS
.menu_two {
border-left: 16px solid #dfdfdf;
padding-left: 0;
}
.sidenav_wrapper {
background: none repeat scroll 0 0 #e7ecf5;
border-left: 6px solid #8fb8e6;
display: none;
padding: 0;
}
.active_sub_menu a{
font-weight: 700;
}
.active_sub_menu .sidenav_wrapper{
display: block;
}
.sidenav_active a{
font-weight: 700;
}
My jsfiddle: JSFIDDLE
I think what you need is
$('ul.navbar-nav li').hover(function () {
$(this).find('.sidenav_wrapper:first').css('display', 'block');
}, function () {
$(this).find('.sidenav_wrapper:first').css('display', 'none');
});
$(".sidenav_active").parent().css({
"display": "block"
});
$('.sidenav_active').closest('.sub_menu').find('a').css({
"font-weight": "700"
});
Demo: Fiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments