[英]How do I make my mobile menu button reveal and hide the navigation bar as well as hide on click in negative space
我一直在尝试创建一个响应式网站,大多数网站都已排序,但是我很难使菜单按钮(显示在媒体查询指定的设备上)显示和隐藏导航栏。
经过研究,似乎唯一的方法是通过JS,这是正确的吗?
无论如何,我对JS感到很糟糕,但是我相信它会起作用,所以我把它放了下来。 这是代码片段。 因此,想法是,当单击“ .menu-icon”时,菜单将下拉(或在这种情况下淡入)并在第二次单击等时恢复为隐藏状态。
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li><a href="index.html">HOME</a>
</li>
<li><a href="#">SECTIONS</a>
<ul>
<li><a href="retail.html">RETAIL </a>
</li>
<li><a href="#">HOTEL</a>
</li>
<li><a href="#">RESTAURANT</a>
</li>
<li><a href="#">SHOPPING</a>
</li>
</ul>
<li><a href="how.html">HOW IT WORKS</a>
</li>
<li><a href="#">OUR EXPERIENCE</a>
</li>
<li><a href="#">TESTIMONIALS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li><a href="">CONTACT US</a>
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
就目前而言,它似乎使导航淡入了大约0.3秒,然后消失了。 没有给用户太多时间从下拉菜单中选择选项! 啊哈。
我知道这将是我很想念的事情。 任何帮助,将不胜感激。
从navbar cf
删除类navbar
可解决切换问题,但会破坏样式。 因此,为您的导航栏指定一个ID并启用它。
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li><a href="index.html">HOME</a>
和
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
HTML和JS都存在一些错误。
首先:您在<li>
元素中打开了内部<ul>
元素,但在li元素之外将其关闭。 结构错误。 它必须在打开的<li>
元素内部关闭。
第二:$(document).ready()函数未正确关闭:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.