滑动侧导航栏
Sliding Side Nav Bar
本文关键字:导航 更新时间:2023-09-26
我需要帮助制作一个向右滑动以显示更多内容的垂直导航栏。我的目标是类似于这里的蓝色条: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>
jsFiddle 演示
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 带有url的单页网站导航
- 父页面的角度路由器导航高亮显示
- 如何正确编程jQuery动画与平滑(导航栏)
- 动态更改'汉堡包'导航取决于BG图像
- 使用导航属性创建Kendo UI网格模型的问题
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 离开页面导航后保留文本区域内容
- 当主导航离开视图时,为粘性导航应用样式
- 删除移动视图粘性js上的粘性导航栏