如何将菜单图标转换为箭头图标？
如何将菜单图标转换为箭头图标？
提问于 2016-02-16 12:02:57
我如何使一个美丽的转换动画菜单图标到箭头对吗？
例如：
<div class="menu">
<div></div>
<div></div>
<div></div>
</div>当菜单关闭-这是3条水平线(汉堡图标)，当.menu.opened -顶部和底部div的转换为箭头右。
如何在CSS上实现？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-16 12:07:58
这是我对你问题的简单解决办法。
$(document).ready(function() {
$('.menuToggle').on('click', function() {
$(this).toggleClass('active');
});
});.menuToggle {
cursor: pointer;
height: 40px;
width: 50px;
position: fixed;
left: 25px;
top: 25px;
}
.menuToggle span {
display: block;
height: 0.4rem;
position: absolute;
width: 3rem;
-webkit-transition: margin .5s ease-in-out, width .5s ease-in-out, -webkit-transform .5s ease-in-out;
transition: margin .5s ease-in-out, width .5s ease-in-out, -webkit-transform .5s ease-in-out;
transition: margin .5s ease-in-out, width .5s ease-in-out, transform .5s ease-in-out;
transition: margin .5s ease-in-out, width .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.menuToggle span:nth-child(2) {
margin-top: 0.9rem;
}
.menuToggle span:nth-child(3) {
margin-top: 1.8rem;
}
.menuToggle.active span:nth-child(odd) {
margin-left: 1.5rem;
width: 1.5rem;
}
.menuToggle.active span:nth-child(1) {
margin-top: 0.5rem;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.menuToggle.active span:nth-child(3) {
margin-top: 1.3rem;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.menuToggle span {
background-color: #777;
border-radius: 5px;
}
.menuToggle.active span {
background-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuToggle">
<span></span>
<span></span>
<span></span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35432108
复制相关文章
相似问题
腾讯云开发者
