我正在尝试制作一个触摸友好的下拉菜单,但不知道如何做。这是我到目前为止所拥有的:
<div class="mainMenu">
<nav role='navigation'>
<ul class="active">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a>
<ul class="sub-menu">
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a>
<ul class="sub-menu">
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li>
</ul>
</nav>
</div>
演示:https://fiddle.jshell.net/cb8ev58m/
这是一个WordPress菜单。如何确保当用户单击下拉列表链接时,他们不会被重定向到该页面,而是打开下拉列表。如果他们再次单击该链接,则他们将被重定向。
第一次点击 - 打开,第二次 - 重定向。但是隐藏子菜单呢?
var clicked = {};
$('.menu-item-has-children > a').on('click', function(e){
var $li = $(this).closest('li');
$li.siblings().each(function(){
$(this).find('.sub-menu').slideUp();
$(this).find('.menu-item-has-children').each(function(){
var id = $(this).attr('data-id');
if( id in clicked) delete clicked[id];
})
});
if( !($li.attr('data-id') in clicked)){
e.preventDefault();
clicked[$li.attr('data-id')] = true;
}
$li.find('.sub-menu').slideDown();
})
.mainMenu {
position: fixed;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
.mainMenu nav ul {
position:absolute;
top: 0px;
margin: 0px;
left:0px;
width: 100%;
text-align: center;
background:rgba(0,0,0,.8);
font-size: 20pt;
list-style-type: none;
}
.mainMenu nav ul li {
color:white;
padding: 10px;
margin-left: 50px;
margin-right: 50px;
font-weight: bold;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.mainMenu nav ul li:hover,
.mainMenu nav ul li:focus {
background-color: #FFCA00;
color: #fff;
font-weight: bold;
}
.mainMenu nav ul li a {
color:white;
font-weight: bold;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.mainMenu nav ul li a:hover {
color: #fff;
font-weight: bold;
}
.mainMenu nav ul ul{
display: none;
position: relative;
margin-top: 10px;
background:transparent;
margin-left: 10px;
}
.mainMenu nav ul ul li {
border-radius: 0px;
float: none;
position: relative;
min-width: 135px;
}
.mainMenu nav ul ul li a {
}
.mainMenu nav ul ul ul {
position: relative;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainMenu">
<nav role='navigation'>
<ul>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a>
<ul class="sub-menu">
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a>
<ul class="sub-menu">
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li>
</ul>
<a class="toggle-nav" href="#"> </a>
</nav>
</div>
HTML <button>
而不是<a>
并使用 CSS 隐藏<ul>
:
ul.sub-menu {
display: none;
}
button:focus + ul.sub-menu, ul.sub-menu:hover {
display: block;
}
之后,您可以通过 JS 修复按钮行为。(针对移动设备进行优化,如果有焦点,请单击时打开链接等)
编辑:
如果<button>
具有焦点,您也可以隐藏它,并将"下拉"链接作为<a>
添加到下面的<ul>
。这不需要 JS 作为基本版本。
button:focus {
display: none;
}