jQuery大型下拉菜单插件booNavigation特效代码

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

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

以下是 jQuery大型下拉菜单插件booNavigation特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery大型下拉菜单插件booNavigation</title>

<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/booNavigation.css">

</head>
<body>
<div class="htmleaf-container">
	<div class="htmleaf-content">
		<nav id="booNavigation" class="booNavigation">
				<ul>
					<li class="navItem">
						<a href="#" title="First Item">First Item</a>
						<ul class="navContent">
							<li>
								<ul>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
									<li><a href="#" title="The best cat">The best cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="The best cat">The best cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="The best cat">The best cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
								</ul>
							</li>
						</ul>
					</li>

					<li class="navItem">
						<a href="#" title="Second Item">Second Item</a>
						<ul class="navContent">
							<li>
								<ul>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
								</ul>
							</li>
						</ul>
					</li>

					<li class="navItem">
						<a href="#" title="Third Item">Third Item</a>
						<ul class="navContent">
							<li>
								<ul>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
								</ul>
							</li>
							<li>
								<ul>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
									<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
									<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
									<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
									<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</nav>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/booNavigation.js"></script>
<script type="text/javascript">
	$(function(){
		 $('#booNavigation').booNavigation({
				slideSpeed: 200
			});
	})
</script>
</body>
</html>

JS代码(booNavigation.js):

/** * @name:booNavigation.js * @date:Sun 16 Feb 2014 * @author:Noemi Losada Estrella <info@noemilosada.com> * Creative Commons License <http://creativecommons.org/licenses/by-sa/3.0/> */
(function($){
	/** * Default options * * @property defaults * @type{
	Object}
*/
 var defaults ={
	slideSpeed:600,fadeSpeed:200,delay:500}
;
	/** * Config elements * * @property config * @type{
	Object}
*/
 var config ={
	item:'.navItem',dropdown:'.navContent',dropdownContent:'.navContent > li',itemsDelay:300}
;
	/** * booNavigation plugin * * Usage:* $('#booNavigation').booNavigation({
	* slideSpeed:500,* delay:200 *}
);
	* * @method booNavigation * @return{
	Object}
this */
 $.fn.booNavigation = function(){
	// Initialize the plugin with the given arguments init.apply(this,arguments);
	return this;
}
;
	/** * @method init * @params{
	Object}
opts * @return{
	void}
*/
 function init(opts){
	// Hide all the dropdowns $(config.dropdown).hide();
	// Override default options with the custom ones var options = $.extend({
}
,defaults,opts);
	// Save options for the current instance this.data(options);
	this.each(function(i,e){
	var $e = $(e);
	// Set initial data properties for each menu item $e.find(config.item).each(function(index,element){
	var $el = $(element);
	$el.data('height',$el.find(config.dropdown).height());
	$el.data('id',index);
}
);
	// Call to the menuSlide effects function menuSlide($e,options);
}
);
}
/** * Animation to display and hide menuSlide * * @method menuSlide * @param{
	Object}
opts * @param{
	String}
selector * @return{
	void}
*/
 function menuSlide(selector,opts){
	var $previousItem = null,$currentItem = null,delayHappened = false,timer;
	// Reset nav content on leave navigation $(selector).on("mouseleave",function(e){
	delayHappened = false;
	$(config.dropdown).slideUp(opts.slideSpeed);
}
);
	$(selector).find(config.item).hover(function(e){
	// First time we are over an item if (delayHappened === false){
	timer = setTimeout(function(){
	// Update delay and current item delayHappened = true;
	$currentItem = $(e.currentTarget);
	// Display dropdown and content $(e.currentTarget).find(config.dropdownContent).show();
	$(e.currentTarget).find(config.dropdown).slideDown(opts.slideSpeed);
}
,opts.delay);
}
else{
	// Changing between items timer = setTimeout(function(){
	if ($(e.currentTarget).data('id') !== $currentItem.data('id')){
	// Update current and previous items $previousItem = $currentItem;
	$currentItem = $(e.currentTarget);
	// Apply height to the previous item and hide previous content $previousItem.find(config.dropdown).height($previousItem.data('height')) .end().find(config.dropdownContent).fadeOut(opts.fadeSpeed);
	// Animate height to the current item and display current content $previousItem.find(config.dropdown).animate({
	height:$currentItem.data('height')}
,opts.slideSpeed,function(){
	$currentItem.find(config.dropdown).height($currentItem.data('height')) .end().find(config.dropdownContent).hide() .end().find(config.dropdown).show();
	// Hide previous item and apply his height back $previousItem.find(config.dropdown).hide() .end().find(config.dropdown).height($previousItem.data('height'));
	// Display the content for the current item $currentItem.find(config.dropdownContent).fadeIn(opts.fadeSpeed);
}
);
}
}
,config.itemsDelay);
}
}
,function(e){
	clearTimeout(timer);
}
);
}
}
)(jQuery);

CSS代码(booNavigation.css):

/** * Name:booNavigation.css * Date:Sun 16 Feb 2014 * Author:Noemi Losada Estrella <info@noemilosada.com> * Creative Commons License <http://creativecommons.org/licenses/by-sa/3.0/> */
/** General================================================== */
*{margin:0;padding:0;}
body{font-family:'Maven Pro',sans-serif;font-size:1.2em;font-weight:400;color:#333;}
.wrapper{margin:50px auto;width:960px;}
ul li{list-style-type:none;}
a{color:#333;text-decoration:none;}
/** Navigation theme================================================== */
.booNavigation{position:relative;}
.booNavigation li.navItem{background-color:#CC33FF;border-top:5px solid #9900CC;padding:5px 20px;float:left;text-decoration:none;transition:all .3s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;}
.booNavigation li.navItem:hover{background-color:#444;border-color:#000;cursor:pointer;}
.booNavigation li.navItem > a{color:#fff;}
.booNavigation li.navItem .navContent{background-color:#444;left:0;position:absolute;top:35px;width:100%;z-index:999;}
.booNavigation .navContent > li{color:#fff;float:left;padding:10px;width:30%;}
.booNavigation .navContent ul li a{color:#fff;display:block;padding:10px;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;}
.booNavigation .navContent ul li a:hover{background-color:#555;padding-left:20px;}
/** Navigation examples================================================== */
.nav-example{clear:left;}

CSS代码(htmleaf-demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}
.htmleaf-content{width:800px;margin:50px auto;}

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