Menu
Good day Everyone
I've been struggling with this for over a month now, looking at various resources on bootstrap and Stackoverflow, and I am unable to resolve this issue.
I have a mega-menu of sorts that spans the entire width of the screen. The problem I am facing can be seen in the below fiddle: https://jsfiddle.net/btesoj8c/
When you click on the menu item "Menu0" the dropdown works perfectly, and then if you click on "Menu1" the dropdown also works, but it doesnt collapse the dropdown of "Menu0". So this eventually causes a battle of menu items to get the menu to close.
The code is as follows:
#main_menu { z-index:999; }
.navbar { padding: 0; margin: 0; background: transparent; border: 0px none; }
#main_menu .nav { float: right; margin: 22px 0 0 0; }
.navbar .nav.pull-right { float: right; margin-right: -30px!important; }
#main_menu .nav > li > a {
font-weight: 400;
letter-spacing: 2px;
font-size: 13px;
padding: 24px 24px 22px;
text-align: center!important;
text-transform: uppercase;
}
#main_menu .nav > .active > a, #main_menu .nav> .active > a:hover {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#main_menu .nav > .active > a:focus { background: transparent; }
#options { margin:0px 0 -10px; }
.header { background: #383838; }
.mega-menu [class*="col-"] {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1em;
text-align: center;
line-height: 2;
background-color:#70AB1F;
border-right: 1px solid #d1d1d1;
height:300px;
}
#menuItem {
background: transparent;
display: block;
float: left;
color: #fff;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 25px;
margin-top: 10px;
text-align: left;
width: 120px;
cursor: pointer;
}
.menu-section{
margin-top: 10px;
margin-bottom: -5px;
font-size: 16px;
display: block;
text-align: left;
float: left;
width: 100%;
color: #fff;
}
.menu-subsection{
margin-bottom: -5px;
margin-left: 10px;
display: block;
font-size: 14px;
text-align: left;
float: left;
width: 100%;
color: #ededed;
}
.green{
width: 100%;
background-color:#70AB1F;
z-index: 9999;
position: absolute;
}<div class="header ">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-collapse ">
<li id="menuItem" data-toggle="collapse" class="collapse" data-target="#menu0">Menu0<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#menu1">Menu1<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#">Menu2<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#" >Menu3<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#" >Menu4</li>
</ul>
</div>
<!-- Dropdown Menu -->
<div class="collapse green" id="menu0">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
</div>
</div>
</div>
<div class="collapse green" id="menu1">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
</div>
</div>
</div> Your assistance would be greatly appreciated.
862
You should change your HTML structure like following way:
<div id="navmenu">
<div class="panel">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-collapse ">
<li id="menuItem" data-parent="#navmenu" data-toggle="collapse" data-target="#menu0">Menu0<br/></li>
.
.
.
<!-- Dropdown Menu -->
<div class="collapse green" id="menu0">
<div class="mega-menu container">
<div class="row">
Give parent div one id and set it to data-parent of li as here navmenu.
data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
Next, make one div with panel class.
And your li have same id which is not good. Make different/unique id for all li.
Working Fiddle
#main_menu { z-index:999; }
.navbar { padding: 0; margin: 0; background: transparent; border: 0px none; }
#main_menu .nav { float: right; margin: 22px 0 0 0; }
.navbar .nav.pull-right { float: right; margin-right: -30px!important; }
#main_menu .nav > li > a {
font-weight: 400;
letter-spacing: 2px;
font-size: 13px;
padding: 24px 24px 22px;
text-align: center!important;
text-transform: uppercase;
}
#main_menu .nav > .active > a, #main_menu .nav> .active > a:hover {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#main_menu .nav > .active > a:focus { background: transparent; }
#options { margin:0px 0 -10px; }
.header { background: #383838; }
.mega-menu [class*="col-"] {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1em;
text-align: center;
line-height: 2;
background-color:#70AB1F;
border-right: 1px solid #d1d1d1;
height:300px;
}
#menuItem, #menuItem1, #menuItem2, #menuItem3, #menuItem4 {
background: transparent;
display: block;
float: left;
color: #fff;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 25px;
margin-top: 10px;
text-align: left;
width: 120px;
cursor: pointer;
}
.menu-section{
margin-top: 10px;
margin-bottom: -5px;
font-size: 16px;
display: block;
text-align: left;
float: left;
width: 100%;
color: #fff;
}
.menu-subsection{
margin-bottom: -5px;
margin-left: 10px;
display: block;
font-size: 14px;
text-align: left;
float: left;
width: 100%;
color: #ededed;
}
.green{
width: 100%;
background-color:#70AB1F;
z-index: 9999;
position: absolute;
}<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navmenu">
<div class="panel header">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-collapse ">
<li id="menuItem" data-parent="#navmenu" data-toggle="collapse" data-target="#menu0">Menu0<br/></li>
<li id="menuItem1" data-parent="#navmenu" data-toggle="collapse" data-target="#menu1">Menu1<br/></li>
<li id="menuItem2" data-parent="#navmenu" data-toggle="collapse" data-target="#">Menu2<br/></li>
<li id="menuItem3" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu3<br/></li>
<li id="menuItem4" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu4</li>
</ul>
</nav>
<!-- Dropdown Menu -->
<div class="collapse green" id="menu0">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
</div>
</div>
</div>
<div class="collapse green" id="menu1">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
