我正在制作一个网站，并且在网站的左侧有一个垂直的按钮列表。我想把它们藏在一边，所以只有一个标签显示。当菜单被隐藏时，我希望标签说更多，然后当菜单可见时，我希望标签说隐藏。
所以我有几个问题...如何使菜单（本质上只是一个 div）在单击时从屏幕外部滑出，同时更改选项卡上的文本和更改 a href 目标这样当滑动功能完成时，标签会说隐藏，当点击它时，它会将div送回屏幕。
如果你的手机上有 facebook 应用，我基本上想在我的桌面网站上复制它。
【问题讨论】：
使用 jQuery 非常简单。这些是您应该采取的步骤。
重要 - toggle 事件在 jQuery 1.8 中已弃用并在 1.9 中删除。我原来的答案将不再有效。这个新版本适用于旧版本和新版本的 jQuery。此方法使用一个点击处理程序和一个名为hidden 的类来确定是否应在屏幕上/关闭弹出窗口进行动画处理。
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
/* 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;
}
$('#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; }
【讨论】：
Jquery .toggle 和 .animate 将按照 mrtsherman 的说明工作。我建议使用 z-index 并稍微调整一下 css。查看此示例 - http://jsfiddle.net/codefuze/HYjEB/1/
【讨论】：
toggle 在 jQuery 1.9 中已被删除，此解决方案将不再有效。
#menu 的宽度，未硬编码到 js 中； #right 也有全宽）
为什么不直接使用CSS3 Transitions 来代替？
它非常简单，同时 Internet Explorer (10) 也完全支持。
这是一个很好的教程： Using CSS transitions
还有这样一个菜单的一个很好的例子： Slide and push menu
【讨论】：
如果您正在寻找更预先打包的解决方案，Bootstrap 还提供了一个不错的幻灯片菜单。
请参阅以下“offcanvas”示例： http://getbootstrap.com/examples/offcanvas/ （您需要将屏幕缩小到移动设备尺寸才能看到“切换导航”的实际效果）
【讨论】：