Question

我想制作类似于m.facebook.com的导航菜单。但是，我希望从网站的左侧滑动出好的动画。

Flow :: 点击按钮＆gt; （菜单默认隐藏）菜单滑出，将主容器向右推一点以适合菜单＆gt;再次点击＆gt;菜单滑入并再次隐藏。

我不知道用javascript或jquery或ajax来制作它，而我是Web开发的新手，并且有太多的效果脚本语言。我可以知道实现这一点，这是完美的顺利吗？

Answer 1

HTML：

<div id="menu">Menu</div>

<button id="openMenu">Toggle menu</button>

CSS：

#menu {
    height: 300px;
    width: 0px;
    border: 1px solid black;
    display: none;
}

JS：

$("#openMenu").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 100}, 1000);           
    }
});

单击按钮和侧面菜单从隐藏中滑出

1 个答案: