[英]making a burger menu disappear on menu click
I have a JS burger menu that appears if the screen width becomes smaller than 860 px. 如果屏幕宽度小于860像素,我会出现一个JS汉堡菜单。 From this width on, the original menu changes into a stacked layout that is sliding out when the burger menu icon is clicked.
从此宽度开始,原始菜单将变为堆叠的布局,当单击汉堡菜单图标时,该布局会滑出。 The toggling in and out works fine when clicking on the burger menu icon, but I would like it to automatically disappear when the user clicks a link in the menu.
单击汉堡菜单图标时,切换进出效果很好,但是我希望当用户单击菜单中的链接时它会自动消失。 Is there a way to do tis?
有没有办法做这些?
This is the relevant HTML: 这是相关的HTML:
<header class="scroll-effect">
<!-- Navigation bar -->
<div class="navigation">
<div class="container">
<div class="row>">
<div class="six.columns">
<a href="index.html">
<img src="images/logo-nav.png" alt="BackupChecks Logo">
</a>
</div>
<div class="six.columns">
<nav>
<a href="#customer-portal" class="scroll-button">Customer Portal</a>
<a href="#service-desk" class="scroll-button">Service Desk</a>
<a href="#pricing" class="scroll-button">Pricing</a>
<a href="#contact" class="scroll-button">Contact</a>
</nav>
</div>
</div>
</div>
</div>
<!-- End of navigation bar -->
<div class="header-contents">
<h1>
<img src="images/logo.png" alt="BackupChecks logo" class="animated bounceInDown">
</h1>
<h2 class="animated bounceInDown">
The backup service desk for Asigra
</h2>
<div class="button-box animated fadeInUp">
<a href="#learn-more" class="scroll-button button-green">
Learn more
</a>
<a href="#pricing" class="scroll-button button-white-outline">
Buy it now
</a>
</div>
</div>
</header>
<!-- JS burger menu -->
<img src="images/trigger.png" alt="Menu icon" class="trigger">
<!-- </a> -->
Here is the relevant CSS: 这是相关的CSS:
.navigation {
background: rgba(255,255,255,1);
height: 70px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: +20;
border-bottom: solid 1px #D9D9D9;
}
header.container {
margin: 0 auto;
max-width: 1000px;
}
.navigation img {
vertical-align: middle;
float: left;
line-height: 70px;
text-align: left;
}
nav {
float: right;
line-height: 70px;
}
nav a {
color: #3E4750;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
padding: 0 0 0 40px;
display: inline-block;
text-decoration: none;
transition: color ease .4s;
}
nav a:hover {
color: #66CC99;
}
@media screen and (max-width: 860px) {
nav {
margin-top: 70px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
nav a {
display: block;
text-align: center;
padding: 0 30px 0 30px;
border-bottom: solid 1px #D9D9D9;
}
nav {
display: none;
}
img.trigger {
display: block;
position: fixed;
top: 0px;
right: 0px;
}
}
And this is the javascript I have: 这是我拥有的javascript:
$("img.trigger").on("click", function(){
$("nav").slideToggle("slow");
});
Just add the links as another trigger to slideToggle
eg to also toggle when any nav a
is clicked. 只需将链接添加为
slideToggle
另一个触发器即可,例如,单击任何nav a
按钮时也可以进行切换。
$("img.trigger, nav a").on("click", function(){
$("nav").slideToggle("slow");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.