0

我正在尝试学习如何创建滑出菜单。到目前为止，我有一些基本的 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>
4

4 回答 4

0

to make such calls much faster, handle integer as integer and not as string...
you can also replace "fast" with 200 because the normal time is 400 ms and 200 ms is the "fast"

$(document).ready(function() {

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

});
于 2014-11-03T17:52:17.837 回答
0

$(文档).ready(函数() {

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

});

这是一个小提琴

于 2014-11-03T17:35:04.107 回答
0

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

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

于 2015-03-31T14:32:26.423 回答
0

试试这个。

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 过渡来平滑它。

于 2014-11-03T22:11:31.700 回答