用于折叠和折叠的侧边栏菜单的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21425244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css for a sidebar menu that folds in and out
提问by Justin Othername
i've been looking around for tutorials on how to make a simple sidebar menu for a site that can fold in & out by clicking on a home button next to the sidebar menu, much like how main menus are opened in apps by clicking on a hamburger icon. I can't really find what i'm looking for, maybe i'm not using the right terminology.
我一直在寻找有关如何为网站制作简单的侧边栏菜单的教程，该菜单可以通过单击侧边栏菜单旁边的主页按钮来折叠和折叠，就像如何在应用程序中通过单击打开主菜单一样汉堡包图标。我真的找不到我要找的东西，也许我没有使用正确的术语。
Any help is appreciated, thx
任何帮助表示赞赏，谢谢
B
乙
回答by Slavenko Miljic
Not sure what kind of solution do you want, pure CSS, JS, jQuery etc but here are some links to get you started.
不确定您想要什么样的解决方案，纯 CSS、JS、jQuery 等，但这里有一些链接可以帮助您入门。
Try searching for "css slide out sidebar" or something along those lines
尝试搜索“css滑出侧边栏”或类似的东西
jQuery examples
jQuery 示例
http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/
http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/
http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/
http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/
CSS Example
CSS 示例
回答by Amarnath Balasubramanian
<div id="slideout">
<img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
<div id="slideout_inner">Hi Welcome to Stack Overflow</div>
</div>
CSS
CSS
#slideout {
position: fixed;
top: 40px;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout_inner {
position: fixed;
top: 40px;
left: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
img {
width:100px;
height:100px;
}
Working Fiddle
Working Fiddle
Source Code
源代码
Demo
演示
回答by peter70
I have changed the css code (example from Amarnath), a little bit. For testing-purposes only. So I can the function better understand. Maybe it can help someone...
我已经稍微更改了 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;
}
回答by peter70
Sorry if it is boring, but here is an another example yet. Here we have an horizontaly foldable bar:
对不起，如果它很无聊，但这里还有一个例子。这里我们有一个水平可折叠的酒吧：
#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;
}
The colors are a litle bite creazy, but this serv as to better illustrate. Cheers!
颜色有点疯狂，但这可以更好地说明。干杯!
