滑出菜单侧边栏

Posted 2023-02-23

【中文标题】滑出菜单侧边栏

【英文标题】：Slide out Menu Sidebar

【发布时间】：2014-11-03 17:23:52

【问题描述】：

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

【问题讨论】：

你到底什么时候要向后滑动？

我想让页面再次滑回（切换）因此，返回左：0px;

滑出后直接？

如果您的问题没有得到解答，请发表评论或将其中一个答案标记为正确

【参考方案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

【讨论】：

因为他的 if 子句是错误的......把它转过来......如果它已经移动到 260 移动到 260 没有意义

@user1432315 我的 if 逻辑错误，笨蛋。现在就试试。这就是为什么您总是在生产之前进行测试...

【参考方案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);
        
    );

);

【参考方案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 过渡来平滑它。

【参考方案4】：

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

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