我需要制作垂直导航栏,该导航栏向右滑动以显示更多内容,需要帮助。我的目标与此处的蓝色条类似:http://www.teehanlax.com/labs/。单击侧面导航栏时,导航栏会滑出(向右),而单击x
按钮时,导航栏会滑回(向左)。
我的代码是:
<!--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>
如果检查该元素,则可以看到该网站正在使用导航margin-left
的负值。当您单击+
时,它们会将margin-left
设置为0px
。
您可以通过附加点击事件处理程序来获得点击效果。滑动效果可以使用jQuery的animate()
完成。下面是我刚才提到的示例。
$(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>