用于边栏菜单的css，该菜单可折叠进出。

Question

我一直在寻找关于如何为一个网站制作一个简单的侧边栏菜单的教程，这个网站可以通过点击侧边栏菜单旁边的主页按钮来折叠，就像点击汉堡包图标在应用程序中打开主菜单一样。我真的找不到我要找的东西，也许我没有使用正确的术语。

任何帮助都是非常感谢的。

B

Answer 1

不确定您想要什么样的解决方案，纯CSS、JS、jQuery等等，但是这里有一些链接可以帮助您入门。

尝试搜索"css幻灯片侧边栏“或类似的内容。

jQuery示例

http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/

http://www.berriart.com/sidr/

http://mmenu.frebsite.nl/

http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

CSS示例

http://css-tricks.com/off-canvas-menu-with-css-target/

Answer 2

我稍微修改了css代码(比如Amarnath)。只作测试用途。这样我才能更好的理解这个功能。也许能帮上忙..。

#slideout {
    position: fixed;

    top: 0px;
    left: 0;
    width: 10px;
    height: 100px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    left: 180px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: 0px;
    left: -180px;
    width: 180px;
    height: 100px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    left: 0;
    background-color: magenta;
}

Answer 3

如果很无聊的话，很抱歉，但这里还有另一个例子。在这里我们有一个水平折叠式酒吧：

#slideout {
    position: fixed;

    top: 0px;
    height: 10px;
    left: 0px;
    right: 0px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    top: 50px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: -50px;
    height: 50px;
    left: 0px;
    right: 0px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: magenta;
}

颜色是一丁点刺耳的，但是这个服务器就能更好地说明。干杯!