我有这个响应的navigation.But,我不能添加多级子菜单到这个导航。如何将多级子菜单添加到此responsive navigation link
中
发布于 2015-06-24 06:38:41
已经做了一些改变
我更新了小提琴,SubItems也在切换。
注意:必须对CSS进行更改,以实现功能。
用于桌面
您可以编写以下脚本,无论您想要什么宽度,
if($(window).width()>"760") {
$("ul.main li").on("click",function(){
if($(this).closest("li").children("ul").length) { if($(this).hasClass("subOpen")){
$(this).removeClass("subOpen");
$(this).find("ul.submenu").hide(300);
}
else {
$(this).addClass("subOpen");
$(this).find("ul.submenu").show(300);
}
}
});
}
移动版
//MENU TOGGLE FUNCTION
$('.rmm-button').click(function(){
// $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
alert($(this).parent().parent().html());
$(this).parent().parent().find("ul.main").show(300);
$(this).removeClass("rmm-closed");
}
else {
alert($(this).html());
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
//SUBMENU TOGGLE FUNCTION
$(".rmm-toggled ul li").on("click",function(){
if($(this).closest("li").children("ul").length) {
if($(this).hasClass("subOpen")){
$(this).removeClass("subOpen");
$(this).find("ul.submenu").hide(300);
}
else{
$(this).addClass("subOpen");
$(this).find("ul.submenu").show(300);
}
}
Here's Fiddle
发布于 2015-06-24 06:18:12
我想你用的是http://responsivemobilemenu.com/en/。它仍然不应该有这样的功能。他们很清楚地在他们的网站上写了下来。有了一些严肃的代码,黑客可能会给你一个解决方案。否则,有足够的好插件来满足您的需求。
发布于 2015-06-24 06:13:25
如果要添加子菜单,请在ul
中放置一个新的li
标记。
<ul class="menu">
<li><a href='#home'>Home</a></li>
<li>
<a href='#about-me'>About me</a>
<ul class="submenu">
<li><a href='#'>SubItem</a></li>
</ul>
</li>
...
</ul>
然后,使用一些CSS和JS代码,您可以创建一个很好的响应菜单。
CSS
.submenu {
display: none;
}
JS
$('.menu > li').hover(function() {
// Show submenu
$(this).find('> ul.submenu').show();
}, function() {
// Hide submenu
$(this).find('> ul.submenu').hide();
});
https://stackoverflow.com/questions/31018824
复制相似问题