滑出菜单栏

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(函数(){)

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

});

这里有把小提琴

Answer 2

为了更快地进行这样的调用，请将整数处理为整数而不是字符串.

您也可以将“快速”替换为“200”，因为正常时间是400 ms，而200 ms是“快”。

$(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/

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;
}

$(document).ready(function() {

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

});

<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。当您单击nav切换链接时，它会将css类添加到页面和导航菜单中，以将它们都滑动到左侧。这允许您使用相同的切换按钮打开和关闭导航。

我还加入了一些CSS3转换来平滑它。