How to open only one submenu at a time
I made a responsive menu. it works fine.
But this is the problem. I want to open one menu at a time.
when one submenu is open, should the other menu be hidden?
How can i do this?
Here is my Script code
$('.moremain').click(function(){
$(this).next('.hrmenu ul ul').slideToggle();
$(this).toggleClass("active");
});
Here is My Menu
+3
source to share
3 answers
Here is a working demo.
$(document).ready(function(){
$('.hrmenu > ul').before("<span class='main'></span>");
$('.hrmenu ul ul').before("<span class='moremain'></span>");
$('.main').click(function(){
$('.hrmenu > ul').slideToggle();
});
$('.moremain').click(function(){
$(this).next('.hrmenu ul ul').slideToggle();
$(this).parents('li').eq(0).siblings().each(function(){
var _toggle = $(this).find('.moremain').eq(0);
if(_toggle.hasClass("active")){
_toggle.removeClass("active");
$(this).find('ul').eq(0).slideToggle();
}
});
$(this).toggleClass("active");
});
$(window).resize(function(){
if(window.screen()> 1000)
{
$('.hrmenu ul').show();
}
});
});
*{margin:0px;padding:0px}
.hrmenu{max-width:1000px;margin:0px auto}
.hrmenu ul{background:#06C;}
.hrmenu ul:after{content:"";display:block;clear:both}
.hrmenu ul li{float:left;position:relative;list-style-type:none;margin:1px;}
.hrmenu ul li a{padding:5px;text-decoration:none;font-size:16px;font-family:arial;color:#fff;margin:1px;display:inline-block; }
.hrmenu ul li a:hover{background:#39C}
.hrmenu ul li:hover > ul{display:block}
.hrmenu ul li ul{display:none;position:absolute;width:140px;left:0}
.hrmenu ul li ul li{width:100%;background:#069;}
.hrmenu ul li ul li ul{left:100%;top:0;width:200px;}
.hrmenu ul li ul li ul li{background:#336;}
.hrmenu ul li ul li ul li ul li{background:#366;}
.main{display:none;height:19px;background:#003 url(threelines.png) no-repeat;cursor:pointer;text-align:right; }
.moremain{height:19px;display:none;width:19px;background:green;cursor:pointer;position:relative; text-align: center;
display: none;color:#fff}
.moremain:after{content:' + '; font-size:18px;}
.active{background:orange;display:none; text-align: center; }
.active:after{content:' - '; font-size:18px;color:#fff;}
@media screen and (max-width:1000px)
{
.moremain{ display: inline-block;}
.main{ display: block;}
.hrmenu ul{background:none}
.hrmenu ul li{float:none; background: rgb(5, 27, 61);}
.hrmenu ul{display:none}
.hrmenu ul li:hover > ul{display:none}
.hrmenu ul li ul{width:98%}
.hrmenu ul li ul{position:relative}
.hrmenu ul li a{width:86%}
.hrmenu ul li{width:98%}
.hrmenu ul li ul li ul{width:100%}
.hrmenu ul li ul li ul{left:0}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='hrmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product Sub</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li> </ul>
</li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
Explanation: For every slibling li
, its first ul is toggled if its livelier toggle has an active class.
+5
source to share
This is what you are looking for
$(".hr-nav-wrapper").hrNavMenu({
speed:800, //integer in milliseconds 1000,2000
menuType :"fromLeft", //fromLeft, fromTop
desktopListWidth : "fluid", // fluid, default
openEvent : "click", //click, mouseover
multiple : false // true, false
});
Download Multilevel Menu
+1
source to share
You don't need javascript to create dropdown menu, just using css
/*rules for all li elements*/
li{
position:relative;/*allow submenu to use the position of its parent as reference */
display:inline-block;
padding:5px;
}
/*rules for only submenu li elements*/
/*submenus are displayed only when its li parent is hovered*/
li > ul{
display:none;
position:absolute;
}
li:hover > ul{
display:block;
}
/*submenus of submenus are displayed at the right of their parent and on the same abscisse*/
li li:hover > ul{
left:100%;
top:0;
}
*{margin:0px;padding:0px;color:#fff}
ul{ list-style-type:none;}
a{ white-space: nowrap;}
.hrmenu ul{background:#06C;}
.hrmenu ul ul {background:#aaf;}
.hrmenu ul ul ul {background:#06C;}
.hrmenu ul ul ul ul {background:#aaf;}
/*rules for all li elements*/
li{
position:relative;/*allow submenu to use the position of its parent as reference */
display:inline-block;
padding:5px;
}
/*rules for only submenu li elements*/
/*submenus are displayed only when its li parent is hovered*/
li > ul{
display:none;
position:absolute;
}
li:hover > ul{
display:block;
}
/*submenus of submenus are displayed at the right of their parent and on the same abscisse*/
li li:hover > ul{
left:100%;
top:0;
}
<div class='hrmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product Sub</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li> </ul>
</li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
0
source to share