我在子菜单上有一个带有下拉悬浮式导航栏,该导航栏在台式机上运行良好,但在移动设备上却无法很好地工作,因为它涵盖了所有其他标签,并且在触摸屏上也无法正常工作,屏幕上,只要您将手指从下拉菜单上移开,悬停就会消失。我希望能够单击子菜单上的下拉菜单,然后停留在一行中。在移动视图中非常类似于导航本身。
Jsfiddle Demo
的HTML
<nav class="clearfix">
<div class="menu-main-menu-container">
<ul class="menu" id="menu-main-menu-1">
<li class=
"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-86">
<a href="#">Home</a>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-148">
<a href="#">other tab</a>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
<a href="#">dropdown</a>
<ul class="sub-menu">
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-320">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-321">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-322">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-323">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-324">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-327">
<a href="#">other sub tab</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom menu-item-328">
<a href="#">other sub tab</a>
</li>
</ul>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-136">
<a href="#">other tab</a>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-147">
<a href="#">other tab</a>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-7">
<a href="#">other tab</a>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-page menu-item-58">
<a href="#">other tab</a>
</li>
</ul>
</div>
<a href="#" id="pull">Menu</a>
的CSS
nav {
height:40px;
width:100%;
color:#fff;
background:#86c024;
font-size:11pt;
position:relative
}
nav a {
color:#fff;
display:inline-block;
width:auto;
text-align:center;
text-decoration:none;
line-height:40px
}
nav ul {
padding:0;
margin:0 auto;
max-width:1000px;
width:100%
}
nav li {
display:inline;
float:left;
height:40px;
/* this should be the same as your nav height */
position:relative
/* this is needed in order to position sub menus */
}
nav li a {
padding:0 15px;
border-right:1px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
}
nav a:hover {
background:#2098d1;
color:#fff;
width:100%
}
nav ul ul {
/* this targets all sub menus */
display:none;
/* hide all sub menus from view */
position:absolute;
left:0;
top:40px
/* this should be the same height as the top level menu -- height + padding + borders */
}
nav li li a {
border:none;
font-size:10pt
}
nav ul ul li {
/* this targets all submenu items */
float:none;
/* overwriting our float up above */
width:100px
/* This needs to match the value we set below */
}
nav ul ul li a {
/* target all sub menu item links */
padding:5px 10px
}
nav ul li:hover > ul {
display:inline-block;
/* show sub menus when hovering over a parent */
background:gray;
text-align:center;
border:0;
z-index:100
}
nav li a:link,a:visited {
color:#fff
}
nav li:last-child a {
border-right:0
}
nav ul li.current-menu-item a:link,nav ul li.current-menu-item a:visited,nav ul li.current-page-ancestor a:link,nav ul li.current-page-ancestor a:visited {
font-weight:700;
background:#2098d1;
color:#fff
}
nav #pull {
display:none
}
@media screen and (max-width: 600px) {
nav {
height:auto
}
nav ul {
width:100%;
display:block;
height:auto
}
nav li {
width:100%;
float:left;
position:relative
}
nav li a {
border-bottom:1px solid #fff;
border-right:1px solid #fff
}
nav a {
text-align:left;
width:100%;
text-indent:25px
}
}
@media only screen and (max-width : 600px) {
nav {
border-bottom:0
}
nav ul {
display:none;
height:auto
}
nav #pull {
display:inline-block;
background:#86c024;
width:100%;
position:relative
}
nav #pull:after {
content:"";
background:red;
width:30px;
height:30px;
display:inline-block;
position:absolute;
right:15px;
top:10px
}
}
@media only screen and (max-width : 320px) {
nav ul li ul li {
width:100%;
height:auto
}
nav li {
display:block;
float:none;
width:100%
}
nav li a {
border-bottom:1px solid #576979
}
}
Java脚本
$(function() {
var pull = $('#pull');
menu = $('nav .menu');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
最佳答案
首先,您需要纠正一些HTML,CSS和JS方面的问题。
1)我在ul之前保留了一个菜单开启标签。
2)然后禁用css菜单悬停在600和320视图中打开
3)如果具有子菜单,则绑定jquery click事件。
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
您可以查看下面的jsFiddle并将其与您的jsFiddle进行比较。
View Here
我会建议您,如果您是新手,请使用引导程序。这将对您有所帮助。并且将帮助您更快地进行开发。
否则,如果您想学习,那是一个很好的尝试。但是请记住,总会有改进的机会。
关于javascript - CSS/Jquery-在移动设备/标签上查看时的导航下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29671661/