如何使用 html、css、jquery 制作类似于 Facebook Mobile 侧边菜单的滑动菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8753024/
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
How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?
提问by Jean Hules
I am making a website and have a vertical list of buttons along the left side of the site. I want to hide them in the side so only a tab show. When the menu is hidden, I want the tab to say something like More, then when the menu is visible, I want the tab to say hide.
我正在制作一个网站，并在网站的左侧有一个垂直的按钮列表。我想把它们藏在一边，所以只有一个标签显示。当菜单隐藏时，我希望选项卡说更多，然后当菜单可见时，我希望选项卡说隐藏。
So i have a couple questions... How can I make the menu, which is essentially just a div, slide out from outside the screen on click, while also having the text on the tab change and the a href destination change so that when the slide function is complete, the tab will say hide, and when clicking it, it will send the div back out of the screen.
所以我有几个问题......我怎样才能使菜单（本质上只是一个 div）在点击时从屏幕外滑出，同时还更改选项卡上的文本和 a href 目标更改，以便何时幻灯片功能完成，标签页会说隐藏，点击它时，它会将div发送回屏幕。
If you have the facebook app on your phone, I basically want to replicate that on my desktop website.
如果你的手机上有 facebook 应用程序，我基本上想在我的桌面网站上复制它。
回答by mrtsherman
This is pretty straightforward using jQuery. These are the steps you should take.
这使用 jQuery 非常简单。这些是您应该采取的步骤。
- Fix the popout to one side of the screen using fixed positioning
- Add a clickable area that user triggers the slide in/out effect with
- Create a jQuery animation to slide the content on/off via negative margins
- In the animation callback change how you want the trigger displayed (show/hide)
- 使用固定定位将弹出窗口固定到屏幕的一侧
- 添加用户触发滑入/滑出效果的可点击区域
- 创建一个 jQuery 动画以通过负边距打开/关闭内容
- 在动画回调中更改您希望触发器显示的方式（显示/隐藏）
Important- toggleevent is deprecated in jQuery 1.8 and removed in 1.9. My original answer will no longer work. This new version will work in both older and newer version of jQuery. This method uses a click handler and a class called hiddento determine whether the popout should be animated on/off the screen.
重要-切换事件在 jQuery 1.8 中已弃用，并在 1.9 中删除。我原来的答案将不再有效。这个新版本适用于旧版和新版 jQuery。此方法使用单击处理程序和调用的类hidden来确定弹出窗口是否应在屏幕上/屏幕外进行动画处理。
jQuery
jQuery
//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
CSS
CSS
/* minimal CSS */
#popout {
position: fixed; /* fix the popout to the left side of the screen */
top: 50px;
left: -40px; /* use a negative margin to pull the icon area of the popout off the edge of the page */
width: 75px;
border: 1px dotted gray;
color: gray;
}
#trigger { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
}
Original Answer (does not work as of jQuery 1.9)
原始答案（从 jQuery 1.9 开始不起作用）
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);
<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }
回答by CodeFuze
Jquery .toggle and .animate will work as noted by mrtsherman. I would suggest using z-index and tweaking the css a bit more. Checkout this for an example - http://jsfiddle.net/codefuze/HYjEB/1/
Jquery .toggle 和 .animate 将按照 mrtsherman 的说明工作。我建议使用 z-index 并稍微调整一下 css。结帐这个例子 - http://jsfiddle.net/codefuze/HYjEB/1/
回答by Zsolt
Why not simply using CSS3 Transitionsinstead?
为什么不简单地使用CSS3 Transitions呢？
It's pretty simple and meanwhile fully supported by Internet Explorer (10) too.
它非常简单，同时也完全受 Internet Explorer (10) 支持。
Here is a nice tutorial: Using CSS transitions
这是一个不错的教程： 使用 CSS 过渡
And a nice example of such a menu: Slide and push menu
以及此类菜单的一个很好的示例： Slide and push menu
回答by sfletche
If you're looking for a more pre-packaged solution, Bootstrap offers a nice slide menu as well.
如果您正在寻找更预先打包的解决方案，Bootstrap 也提供了一个不错的幻灯片菜单。
See the following 'offcanvas' example: http://getbootstrap.com/examples/offcanvas/(you'll need to shrink your screen down to mobile size to see the 'Toggle nav' in action)
请参阅以下“offcanvas”示例：http://getbootstrap.com/examples/offcanvas/ （您需要将屏幕缩小到移动设备大小才能查看“切换导航”的实际效果）
回答by malikov
I'd say take look at those links : http://css-tricks.com/off-canvas-menu-with-css-target/or http://codepen.io/jasonhowmans/pen/dykhL
我想说看看这些链接：http: //css-tricks.com/off-canvas-menu-with-css-target/或http://codepen.io/jasonhowmans/pen/dykhL
