我在子菜单上有一个带有下拉悬停的导航栏,它在桌面上运行良好,但在移动设备上运行不佳,因为它覆盖了所有其他选项卡,而且在移动设备上也运行不正常触摸屏,一旦您将手指从下拉菜单上移开,悬停就会消失。我希望能够单击子菜单上的下拉菜单,然后保持一行。很像移动 View 中的导航本身。
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
}
}
Javascript
$(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 View 中打开
3) 如果它有子菜单,则绑定(bind) jquery click 事件。
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
您可以查看下面的 jsFiddle 并与您的进行比较。
我会建议你,如果你是新手,那么使用 bootstrap。这对你有帮助。并将帮助您更快地发展。
否则,如果您想学习,那是很好的尝试。但请记住,总有改进的机会。
关于javascript - CSS/Jquery - 在移动设备/选项卡上查看时的导航下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29671661/