jQuery滚动菜单插件Section Menu

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滚动菜单插件Section Menu 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
	<head>
		<title>jQuery�����˵����Section Menu</title>
		<meta charset="gb2312" />
		<link rel="stylesheet" href="assets/css/style.css" />
		<link rel="stylesheet" href="assets/css/jquery.sectionmenu.css" />
		<script src="jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.fragmentscroll.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.sectionmenu.min.js"></script>
		<script type="text/javascript">

		$(window).load(function() {
			$('body').sectionMenu().fragmentScroll();
		});

		</script>
	</head>
	<body>
		<div id="page">
			<section id="home" class="container" data-section-menu="Description">
				<h1>Description</h1>
				<p>The jQuery section menu plugin creates a side menu <br />that allows you to scroll to the different sections <br />on the page.</p>
				<p>Use the side menu at the right to <br />scroll trough the page.</p>
			</section>
			<section id="section1" class="container" data-section-menu="Section 1">
				<h1>Section 1</h1>
				<p>We created some sections<br />to play with.</p>
			</section>
			<section id="section2" class="container" data-section-menu="Section 2">
				<h1>Section 2</h1>
				<p>We created some sections<br />to play with.</p>
			</section>
			<section id="section3" class="container" data-section-menu="Section 3">
				<h1>Section 3</h1>
				<p>We created some sections<br />to play with.</p>
			</section>
		</div>
</body>
</html>

CSS代码(style.css):

html,body{margin:0;padding:0;height:100%;}
body{background:rgb(22,189,222) url('../images/background.jpg') no-repeat fixed center center;background-size:cover;color:rgb(200,200,200);font-family:'Raleway',sans-serif;font-size:12px;}
h1{color:white;font-weight:300;}
h1 span{color:rgb(22,189,222);}
a{transition:all 0.3s ease;color:rgb(22,189,222);text-decoration:none;}
a:hover{color:rgb(59,77,86);}
ul{list-style-type:square;}
.container{margin:0 auto;padding:10px 30px;min-width:768px;max-width:1024px;}
.container:before,.container:after{content:" ";display:table;}
.container:after{clear:both;}
#nav{position:fixed;top:0;width:100%;height:60px;background:white;background:rgba(255,255,255,0.8);color:rgb(59,77,86);line-height:40px;}
#nav h1{float:left;margin:0;color:rgb(59,77,86);}
#nav ul{float:right;margin:0;padding:0;list-style:none;}
#nav li{float:left;margin-left:30px;line-height:50px;}
#nav a{color:#3b4d56;}
#nav a:hover{color:#16bdde;}
#page section{padding-top:100px;padding-bottom:400px;font-size:20px;text-align:center;}
#page p{line-height:30px;}

附件:下载该文件资源,减少时间成本(增值服务)