jquery实现右侧栏菜单选择操作
作者：bea
本文实例分享了jquery实现右侧栏菜单选择的相关代码，供大家参考，具体内容如下 效果图： 实现菜单： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右侧栏菜单</title> <style type="text/css"> *{ margin: 0; paddi
本文实例分享了jquery实现右侧栏菜单选择的相关代码，供大家参考，具体内容如下
效果图：
实现菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右侧栏菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 500px;
}
.block{
border:1px solid #ccc;
margin: 20px 20px;
}
.rightMenu{
position: fixed;
right: 50px;
top: 200px;
/*opacity: 0;*/
display: none;
}
.rightMenu li{
list-style: none;
display: block;
width: 80px;
height: 32px;
line-height: 32px;
text-align: center;
border: 1px solid blue;
margin: 5px 0px;
}
.rightMenu li a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div class="wrap">
<div class="block block1">
<h4>第一部分</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
</p>
</div>
<div class="block block2">
<h4>第二部分</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
</p>
</div>
<div class="block block3">
<h4>第三部分</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
</p>
</div>
<div class="block block4">
<h4>第四部分</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
</p>
</div>
</div>
<ul class="rightMenu">
<li><a href="###">第一部分</a></li>
<li><a href="###">第二部分</a></li>
<li><a href="###">第三部分</a></li>
<li><a href="###">第四部分</a></li>
</ul>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".rightMenu").on("click","li",function(){
// alert($(this).index())
var index = $(this).index();
console.log(index);
var t = $(".wrap .block").eq(index).offset().top
$("html body").animate({
scrollTop:t
})
})
var h = $(".rightMenu").height();
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".rightMenu").stop().animate({
height:0,
opacity: 0
},1000)
}
else{
$(".rightMenu").show().stop().animate({
height:h,
opacity: 1
},1000)
}
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
猜你喜欢
您可能感兴趣的文章:
- JS面向对象编程详解
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 使用Jasmine和Karma对AngularJS页面程序进行测试
- JavaScript的React框架中的JSX语法学习入门教程
- 在AngularJS框架中处理数据建模的方式解析
- 简单讲解AngularJS的Routing路由的定义与使用
- 整理AngularJS框架使用过程当中的一些性能优化要点
- 详解JavaScript的AngularJS框架中的表达式与指令
- 深入解析AngularJS框架中$scope的作用与生命周期
- JS判断字符串字节数并截取长度的方法
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- js控制TR的显示隐藏
- Node.js操作Firebird数据库教程
- 实例剖析AngularJS框架中数据的双向绑定运用
- node.js微信公众平台开发教程
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- 深入学习AngularJS中数据的双向绑定机制
- 简单的jQuery banner图片轮播实例代码
- 百度地图给map添加右键菜单（判断是否为marker）