滑动侧导航栏

Question

I need help with making a vertical nav bar that slides to the right to reveal more content.我需要帮助制作向右滑动以显示更多内容的垂直导航栏。 I'm aiming towards something similar to the blue bar here: http://www.teehanlax.com/labs/ .我的目标是类似于此处的蓝色条： http ://www.teehanlax.com/labs/。 The nav bar slides out (to the right) when the side navigation bar is clicked, and slides back (to the left) when the x button is clicked.单击侧面导航栏时，导航栏滑出（向右），单击x按钮时，导航栏滑回（向左）。

my code is:我的代码是：

<!--Am I implementing the jQuery right?-->
<!DOCTYPE HTML> <html> <head> <title>Nishad</title> 
<link rel="stylesheet" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> 

$(function() { $('#nav').click(function() 
{ var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px'; $(this).animate({ 'margin-left' : leftMargin }, 500); 
}); 
});  
</head> <body> <div id="wrapper">
<div id="nav"></div> 
<div id="content"></div> 
</div> </body> </html>

Answer 1

If you inspect the element, you can see that the website is making use of a negative value for the navigation's margin-left .如果您检查该元素，您可以看到该网站正在为导航的margin-left使用负值。 When you click the + , they are setting margin-left to 0px .当您单击+时，他们将margin-left设置为0px 。

You can get the click effect by attaching a click event handler.您可以通过附加点击事件处理程序来获得点击效果。 The sliding effect can be done using jQuery's animate() .滑动效果可以使用 jQuery 的animate()来完成。 Below is an example what I just mentioned.下面是我刚才提到的一个例子。

 $(function() { $('#nav').click(function() { var leftMargin = ($(this).css('margin-left') === '0px')? '-150px': '0px'; $(this).animate({ 'margin-left': leftMargin }, 500); }); });

 #wrapper { white-space: nowrap; } #nav, #content { height: 500px; display: inline-block; } #nav { width: 200px; margin-left: -150px; cursor: pointer; background: lightgreen; } #content { width: 500px; background: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div id="nav"></div><div id="content"></div> </div>

jsFiddle Demo jsFiddle 演示

滑动侧导航栏

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-08-13 01:30:25

滑动侧导航栏

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-08-13 01:30:25

解决方案1
3 已采纳 2012-08-13 01:30:25