从右向左滑动垂直菜单> jQuery的

时间:2017-02-16 15:08:04

标签: javascript jquery html css hamburger-menu

大家好,我希望我的垂直菜单从右向左滑动。但据我所知,jquery是用.toggle()(这是从上到下滑动) 我想在点击汉堡包菜单时从右到左滑动菜单。如果任何1可以帮助我,我真的会aprreaciate

我没有尝试使用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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

这是你在找什么?

CodePen link

.first-section{
  display: none;
  padding: 0;
}

JQUERY:

$('.ham-menu').click(function(){
  $('.first-section').toggle();
})