[英]How to change hamburger menu icon when clicked?
Okay so I have a hamburger style menu that uses the normal 3 line icon but I'd like it so when you click it the icon changes to a cross.好的,我有一个使用普通 3 行图标的汉堡包样式菜单,但我喜欢它,因此当您单击它时,图标会变为十字。 How would I achieve this?
我将如何实现这一目标? How would I structure the JavaScript?
我将如何构建 JavaScript?
HTML: HTML:
<ul class="navigation">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Meet the team</a></li>
<li class="nav-item"><a href="#">Blog</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
CSS: CSS:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #000;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
I think the better solution is to use an event caused in the collapse menu instead of onclick
.我认为更好的解决方案是使用折叠菜单中引起的事件而不是
onclick
。
show.bs.collapse
- Fired after the show method is called. show.bs.collapse
- 在调用 show 方法后触发。
shown.bs.collapse
- Will wait for CSS transitions to complete shown.bs.collapse
- 将等待 CSS 转换完成
hide.bs.collapse
- Fired when the hide instance method has been called. hide.bs.collapse
- 在调用 hide 实例方法时触发。
hidden.bs.collapse
- Will wait for CSS transitions to complete hidden.bs.collapse
- 将等待 CSS 转换完成
Code look like this:代码如下所示:
$('.navigation').on('show.bs.collapse', function() {
// set cross as content of menu button
});
$('.navigation').on('hide.bs.collapse', function() {
// set tree lines as content of menu button
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.