移动端点击展开菜单js代码

时间：2023年10月23日

来源：网络

编辑：佚名

html代码：
<div class="menu">
<i></i>
<i></i>
<i></i>
</div>
css代码：
.hdCon .menu{width: 40px;border-radius: 3px;border: 1px solid rgb(226, 110, 15);padding: 4px 0;cursor: pointer;}
.hdCon .menu i{display: block;width: 30px;height: 2px;background: rgb(49, 151, 40);margin: 6px 5px;}
.menu.active i{transform-origin: left;transition: 0.3s;}
.menu.active i:nth-child(1){transform: rotate(32deg);}
.menu.active i:nth-child(2){opacity: 0;}
.menu.active i:nth-child(3){transform: rotate(-32deg);}
js代码：
$(function() {
//点击切换菜单
$(".menu").click(function(){
$(this).toggleClass("active")
$(".hdNav").slideToggle()
})
})
.hdNav是隐藏的盒子

新闻资讯更多

猜你需要