响应式菜单在单击外部时不会切换或关闭
responsive menu won't toggle or close when clicking outside
所以,我有这个导航菜单按钮显示在媒体查询中
@media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #343434;
right: 20px;
top: 60px;
width: 25%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
#gallery li {
width: 100%;
margin: 20px 0 20px;
}
}
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Work</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</nav>
问题是在移动设备上单击它后它不会关闭。有什么线索吗?
我已经尝试了几个javascript/jquery,但没有成功。链接 - http://www.ronyahav.com
我想这就是你要找的!
$(document).ready(function (){
$('#menu-icon').click(function (){
$('#menu').toggle();
});
$('html').click(function (){
$('#menu').hide();
});
$('#menu').click(function (event){
event.stopPropagation();
});
$('#menu-icon').click(function (event){
event.stopPropagation();
});
});
#menu-icon{
border: solid 1px black;
background: #333;
color: white;
display: block;
width: 40px;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
#menu{
display: none;
padding:10px;
border: solid 1px red;
background: #aaa;
margin: 0;
list-style: none;
width: 200px;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<nav>
<a href="#" id="menu-icon">menu</a>
<ul id="menu">
<li><a href="index.html" class="current">Work</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</nav>
相关文章:
- JQuery在单击正文时隐藏上下文菜单
- 通过单击同一图标使菜单出现和消失
- 引导菜单没有't在导航栏中单击打开
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 单击图像后如何创建下拉菜单?[引导/角度]
- 单击事件打开两个弹出菜单
- 单击删除下拉子菜单
- 使用Jquery创建一个具有单击和悬停功能的菜单
- 悬停时展开垂直下拉菜单,而不是单击
- 切换菜单仅在单击时打开,而不是默认情况下打开
- 单击下拉菜单时,将文本粘贴到输入框中
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 阻止在单击和关闭覆盖菜单css时滚动正文
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- 引导两个响应菜单-单击另一个菜单按钮时折叠一个菜单
- jQuery UI链接选择菜单.单击按钮时窗体将重置
- CSS 菜单 - 单击时的子菜单 (JS)
- Jquery下拉菜单.单击时,子菜单将消失.因此,如何使子菜单在单击时保持不变
- 多个下拉菜单-单击不关闭
- Accordian菜单(单击时)影响图像在下一个表格单元格中的位置