滑出菜单侧边栏

Question

我正在尝试学习如何创建滑出式菜单。到目前为止，我有一些基本的 HTML 和 CSS。但是，我不确定编写 jQuery 的最佳方法。目前，它滑出但不会滑回。或者我可以使用 CSS 过渡吗？

<div class="side-menu">
   MENU
</div>

<div class="page">

    <a href="#" id="slideMenu"><i class="fa fa-bars"></i></a>

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p>

</div>

我的 CSS：

div.side-menu {
    width:260px;
    height:400px;
    background:#202020;
    position:absolute;
    left:-260px;
    top:0px;
}

div.page {
    width:100%; 
    height:100%;
    position:relative;
    top:0;
    left:0px;
    padding:4%;
    padding-top:100px;
    background:#f4f4f4;
}


div.page a {
    display:block;
    width:50px;
    height:50px;
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;    
    background:#666;
    position:absolute;
    top:20px;
    left:4%;
    font-size:24px;
    text-align:center;
    text-decoration:none;
    padding-top:7px;
    color:#fff;
    outline:none;   
 }

p {
    color:#555; 
    font-size:18px;
    font-weight:normal;
}

我的 jQuery：

    <script>
    $(document).ready(function() {

        $("a").click(function() {
        $(".page").animate({"left": "260px"},"fast");
        });

    });
    </script>

Answer 1

$(document).ready(function() {

    $("a").click(function() {
        if($(".page").css("left") == "0px"){
            $(".page").animate({"left": "260px"},"fast");
        }
        else{
            $(".page").animate({"left": "0px"},"fast");
        }
    });

});

heres a fiddle

Answer 2

要使此类调用更快，请将整数处理为整数而不是字符串...
您也可以用 200 替换“快速”，因为正常时间是 400 毫秒，而 200 毫秒是“快速”

$(document).ready(function() {

    $("a").click(function() {
        if(parseInt($(".page").css("left")) == 0){
            $(".page").animate({left: 260},200);
        }
        else{
            $(".page").animate({left: 0},200);
        }
    });

});

Answer 3

试试这个。

http://jsfiddle.net/qdp7j8mq/

--------------- CSS --------------

div.side-menu {
    width:260px;
    height:400px;
    background:#202020;
    position:absolute;
    left:-260px;
    top:0px;
    z-index:99999;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

.nav-active{
    left: 0px !important;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

.body-active{
    left: 260px !important;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

div.page {
    width:100%; 
    height:100%;
    position:relative;
    top:0;
    left:0px;
    padding:4%;
    padding-top:100px;
    background:#f4f4f4;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}


#slideMenu {
    display:block;
    width:50px;
    height:50px;
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;    
    background:#666;
    position:absolute;
    top:20px;
    left:4%;
    font-size:24px;
    text-align:center;
    text-decoration:none;
    padding-top:7px;
    color:#fff;
    outline:none;  
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
 }

p {
    color:#555; 
    font-size:18px;
    font-weight:normal;
}

--------------- jQuery --------------

$(document).ready(function() {

    $("#slideMenu").click(function() {
    $(".page").toggleClass('body-active');
       $(".side-menu").toggleClass('nav-active'); 
    });

});

--------------- HTML --------------

<div class="side-menu">
   MENU
</div>

<div class="page">

    <div id="slideMenu"><i class="fa fa-bars"></i></div>

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p>

</div>

这是一个简单的 jQuery。当您单击导航切换链接时，它会将 css 类添加到页面和导航菜单以将它们都向左滑动。这允许您使用相同的切换按钮来打开和关闭导航。

我还加入了一些 CSS3 过渡来平滑它。

Answer 4

您也可以在不使用 jquery 或 javascript 的情况下通过仔细使用复选框和标签来实现此目的。

如本教程中所见https://www.youtube.com/watch?v=d4P8s-mkMvs