嗨,我希望我的垂直菜单从右到左滑动。但是据我所知我想要单击汉堡菜单时,菜单从右到左将滑动。如果Any1可以帮助我,我真的会APREREACIATE
我没有尝试使用jQuery从右到左滑动的任何代码,我只尝试了.toggle
.ham-menu{
width: 35px;
display: block;
z-index: 2;
position: relative;
top: 10px;
right: 15px;
cursor: pointer;
}
.ham-menu .line{
background: green;
width: 100%;
display: block;
margin-top: 3px;
height: 4px;
border-radius: 2px;
}
.first-section{
padding: 0;
}
.first-section .slide-menu{
width: 20vw;
height: 100vh;
background-color: #000;
z-index: 1;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.list-menu{
list-style: none;
text-align: center;
font-size: 30px;
}
.list-menu li{
margin: 20px;
}
.list-menu a{
text-decoration: none;
color: #fff;
}
<div class="ham-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="first-section container-fluid">
<div class="slide-menu">
<ul class="list-menu animated">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Footer</a></li>
</ul>
</div>
</div>
这是您要寻找的吗?
codepen链接
.first-section{
display: none;
padding: 0;
}
jQuery:
$('.ham-menu').click(function(){
$('.first-section').toggle();
})