固顶菜单，点击向下滑出的多级下拉菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】固顶菜单，点击向下滑出的多级下拉菜单
作者:Dezai.CN / 发布于2013/4/17/ 524
一个使用jQuery实现的多级下滑菜单，默认状态下合拢折叠于网页顶部，显示下滑三角，鼠标点击后向下滑出展开，支持多级，演示代码支持两级，这种风格和树形菜单比较相似，在兼容性方面，这个下滑菜单也做的挺好，有较好的用户体验。

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery顶部多级固定下拉菜单列表</title>
	<style>
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
	}
	table {
	border-collapse:collapse;
	border-spacing:0;
	}
	fieldset, img {
	border:0;
	}
	address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
	}
	ol, ul {
	list-style:none;
	}
	caption, th {
	text-align:left;
	}
	h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
	}
	q:before, q:after {
	content:'';
	}
	abbr, acronym {
	border:0;
	}
	body {
	margin: 0 auto;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	color: #343434;
	background: #ebddba;
	background: -webkit-linear-gradient(#ebddba, #f9f1dd, #ebddba);
	background: -moz-linear-gradient(#ebddba, #f9f1dd, #ebddba);
	background: -o-linear-gradient(#ebddba, #f9f1dd, #ebddba);
	background: -ms-linear-gradient(#ebddba, #f9f1dd, #ebddba);
	background: linear-gradient(#ebddba, #f9f1dd, #ebddba);
	overflow-x: hidden;
	}
	a:link, a:visited {
	color: #3381d6;
	-webkit-transition: color .7s ease;
	-moz-transition: color .7s ease;
	-o-transition: color .7s ease;
	-ms-transition: color .7s ease;
	transition: color .7s ease;
	}
	a:hover, a:active, a:focus {
	color: #e06c1f;
	}
	.container {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	padding: 70px 10px 0 10px;
	}
	.toc-holder {
	width: 18%;
	min-width: 360px;
	}
	.toc-holder a:link, .toc-holder a:visited {
	text-decoration: none;
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	}
	.toc-holder li li a:link, .toc-holder li li a:visited {
	padding-left: 50px;
	}
	.toc-holder li a:hover {
	background: #666;
	border-left: solid 5px transparent;
	}
	.toc-holder {
	position: fixed;
	margin-top: -70px;
	}
	.toc-link:link, .toc-link:visited {
	color: white;
	position: relative;
	display: block;
	z-index: 20;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	width: 100%;
	background: #444;
	}
	.toc-link:hover {
	background: #666;
	}
	.toc-link span {
	font-size: 16px;
	margin-right: 5px;
	display: inline-block;
	-webkit-transition: -webkit-transform .4s ease;
	-moz-transition: -moz-transform .4s ease;
	-o-transition: -o-transform .4s ease;
	-ms-transition: -ms-transform .4s ease;
	transition: transform .4s ease;
	}
	.toc-link span.rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	}
	.toc {
	position: absolute;
	z-index: 10;
	width: 103%;
	background: #222;
	padding: 40px 0 20px 0;
	}
	.toc-h1, .toc-h1 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	.toc-h1 a:link, .toc-h1 a:visited {
	color: white;
	padding: 5px 20px 5px 30px;
	display: block;
	}
	.closed {
	display: none;
	}
	h1 {
	font-family: Georgia, sans-serif;
	font-size: 2.3em;
	font-style: italic;
	margin: 0 0 40px 0;
	text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
	}
	footer {
	padding-bottom: 30px;
	}
	p {
	margin-bottom: 30px;
	}
	.p1 {
	color: darkgreen;
	}
	h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;
	}
	.top-link:link, .top-link:visited {
	display: block;
	text-decoration: none;
	position: fixed;
	bottom: 0;
	right: 2%;
	color: white;
	background: #222;
	padding: 8px 16px 0 16px;
	height: 30px;
	font-size: 14px;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	}
	@media (max-width: 480px) {
	.toc-holder {
	left: 0;
	right: 0;
	}
	.toc-link:link, .toc-link:visited {
	width: 150%;
	}
	.toc {
	width: 155%;
	}
	.top-link:link, .top-link:visited {
	top: 2px;
	z-index: 20;
	background: none;
	}
	}
	</style>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>

	<body>
	<div class="container">

	<div id="toc-holder" class="toc-holder">
	 <a href="#" class="toc-link" id="toc-link"><span>&#9660;</span> Table of Contents</a>
	 <ul id="toc" class="toc">
	 <li class="toc-h1"><a href="#section1">1. Loomings</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section1-1">1.1 Call me Ishmael</a></li>
	 <li><a href="#section1-2">1.2 Circumambulate</a></li>
	 </ul>
	 </li>
	 <li class="toc-h1"><a href="#section2">2. The Carpet-Bag</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section2-1">2.1 I stuffed a shirt</a></li>
	 <li><a href="#section2-2">2.2 As most young candidates</a></li>
	 </ul>
	 </li>
	 <li class="toc-h1"><a href="#section3">3. The Spouter-Inn</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section3-1">3.1 Entering that gable-ended</a></li>
	 <li><a href="#section3-2">3.2 But what most puzzled</a></li>
	 </ul>
	 </li>
	 <li class="toc-h1"><a href="#section4">4. Counterpane</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section4-1">4.1 Upon waking next morning about daylight, I found Queequeg's arm thrown over me</a></li>
	 <li><a href="#section4-2">4.2 My sensations were strange</a></li>
	 </ul>
	 </li>
	 <li class="toc-h1"><a href="#section5">5. Breakfast</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section5-1">5.1 I quickly followed suit</a></li>
	 <li><a href="#section5-2">5.2 You could pretty plainly tell</a></li>
	 </ul>
	 </li>
	 <li class="toc-h1"><a href="#section6">6. The Street</a>
	 <ul class="toc-sub closed">
	 <li><a href="#section6-1">6.1 If I had been astonished at first</a></li>
	 <li><a href="#section6-2">6.2 But, besides the Feegeeans</a></li>
	 </ul>
	 </li>
	</ul>
	</div>
	 </div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	(function ($) {
	 $.fixedTOC = function (el, settings) {

	 var base = this,
	 s = null;

	 base.$el = $(el);
	 base.el = el;
	 base.$el.data("fixedTOC", base);
	 base.settings = $.extend({}, $.fixedTOC.defaultSettings, settings);
	 s = base.settings;

	 if (!s.useSubMenus) {
	 s.tocLinks = '.toc-h1 > a';
	 }

	 base.methods = {

	 init : function () {
	 s.tocSub.slideUp();
	 s.tocHeight = base.$el.height() + 20;
	 base.$el.css({
	 top: '-' + s.tocHeight + 'px'
	 });
	 base.$el.addClass(s.tocUpClass);
	 },
	 doOpenMenu : function () {
	 s.tocLink.on(s.menuOpens, function () {
	 if (base.$el.hasClass(s.tocUpClass)) {
	 s.tocLink.find('span').addClass('rotate');
	 base.$el.stop().animate({
	 top: '0'
	 }, s.menuSpeed, function () {
	 base.$el.removeClass(s.tocUpClass);
	 });

	 } else {
	 s.tocHeight = base.$el.height() + 20;
	 s.tocLink.find('span').removeClass('rotate');
	 base.$el.stop().animate({
	 top: '-' + s.tocHeight + 'px'
	 }, s.menuSpeed, function () {
	 base.$el.addClass(s.tocUpClass);
	 $('.toc-sub').slideUp(0);
	 });
	 }
	 return false;
	 });
	 },
	 doOpenItem : function () {
	 $('.toc-h1>a').on('click', function () {
	 s.tocSub.each(function () {
	 if (!$(this).hasClass('closed')) {
	 $(this).stop().slideUp().addClass('closed');
	 }
	 });
	 $(this).parent().find('.toc-sub').stop().slideToggle().removeClass('closed');
	 return false;
	 });
	 },
	 doScroll : function () {
	 $(s.tocLinks).on('click', function () {
	 s.currHash = $(this)[0].hash;
	 $('html, body').animate({
	 scrollTop: $(s.currHash).offset().top - 80
	 }, s.scrollSpeed, function () {
	 location.hash = s.currHash;
	 });
	 return false;
	 });
	 },
	 doCloseMenu : function () {
	 $('#toc-holder').on('mouseleave', function () {
	 s.tocHeight = base.$el.height() + 20;
	 s.tocLink.find('span').removeClass('rotate');
	 base.$el.animate({
	 top: '-' + s.tocHeight + 'px'
	 }, s.menuSpeed, function () {
	 base.$el.addClass(s.tocUpClass);
	 if (s.resetSubMenus) {
	 $('.toc-sub').slideUp(0);
	 }
	 });
	 });
	 },
	 doTopLink : function () {
	 $(s.topLink).on('click', function () {
	 s.currHash = $(this)[0].hash;
	 $('html, body').animate({
	 scrollTop: 0
	 }, s.scrollSpeed, function () {
	 location.hash = s.currHash;
	 });
	 return false;
	 });
	 }
	 };
	 base.methods.init();
	 base.methods.doOpenMenu();
	 if (s.useSubMenus) {
	 base.methods.doOpenItem();
	 }
	 base.methods.doScroll();
	 base.methods.doCloseMenu();
	 if (s.topLinkWorks) {
	 base.methods.doTopLink();
	 }
	 };
	 $.fixedTOC.defaultSettings = {
	 tocHeight : null,
	 tocSub : $('.toc-sub'),
	 tocUpClass : 'toc-up',
	 tocLink : $('#toc-link'),
	 tocLinks : '.toc-h1 ul a',
	 topLink : $('#top-link'),
	 currHash : null,
	 // customizable settings
	 scrollSpeed : 1000,
	 menuSpeed : 300,
	 useSubMenus : true,
	 resetSubMenus : true,
	 topLinkWorks : true
	 };
	 $.fn.fixedTOC = function (settings) {
	 return this.each(function () {
	 (new $.fixedTOC(this, settings));
	 });
	 };
	})(jQuery);
	$('#toc').fixedTOC({
	menuOpens: 'click', // or 'mouseenter'
	scrollSpeed: 1000,
	menuSpeed: 300,
	useSubMenus: true,
	resetSubMenus: true,
	topLinkWorks: true
	});
	</script>
	</body>
	</html>
试试其它关键字
　多级下拉菜单　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)