以下是 jQuery横向下拉导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery横向下拉导航菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation_horiz').naviDropDown({
dropDownWidth: '300px'
});
$('#navigation_vert').naviDropDown({
dropDownWidth: '300px',
orientation: 'vertical'
});
});
</script>
<style type="text/css">
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px}
.container {margin:10px auto; width:950px; height:300px; background:#eee; padding:50px 0 0 0}
/* ----------------------------------------------------- */
/* navigation styles - BEGIN */
/* style for horizontal nav */
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:50px; display:block}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
/* style for vertical nav */
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_vert ul {height:50px; display:block}
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
/* style for each drop down - horizontal */
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_three a {color:gray}
/* style for each drop down - vertical */
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}
#navigation_vert ul li #dropdown_four a {color:red}
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}
#navigation_vert ul li #dropdown_five a {color:black}
#navigation_vert ul li #dropdown_six {background:#777; color:#fff}
#navigation_vert ul li #dropdown_six a {color:orange}
/* navigation styles - END */
/* ----------------------------------------------------- */
</style>
</head>
<body>
<div class="container">
<div id="navigation_horiz">
<ul>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_one">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_two">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li><a href="" class="navlink">List Item</a></li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_three">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
</ul>
</div><!-- #navigation_horiz -->
</div><!-- .container -->
<div class="container">
<div id="navigation_vert">
<ul>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_four">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_five">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li><a href="" class="navlink">List Item</a></li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_six">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
</ul>
</div><!-- #navigation_vert -->
</div><!-- .container -->
</body>
</html>
JS代码(jquery.naviDropDown.1.0.js):
/*** plugin:jquery.naviDropDown.js* author:kt.cheung @ Brandammo* website:www.brandammo.co.uk* version:1.0* date:19th feb 2011* description:simple jquery navigation drop down menu with easing and hoverIntent**/
(function($){
$.fn.naviDropDown = function(options){
//set up default optionsvar defaults ={
dropDownClass:'dropdown',//the class name for your drop downdropDownWidth:'auto',//the default width of drop down elementsslideDownEasing:'easeInOutCirc',//easing method for slideDownslideUpEasing:'easeInOutCirc',//easing method for slideUpslideDownDuration:500,//easing duration for slideDownslideUpDuration:500,//easing duration for slideUporientation:'horizontal' //orientation - either 'horizontal' or 'vertical'}
;
var opts = $.extend({
}
,defaults,options);
return this.each(function(){
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width',opts.dropDownWidth).css('display','none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal'){
$this.find('.'+opts.dropDownClass).css('left','0px').css('top',buttonHeight);
}
if(opts.orientation == 'vertical'){
$this.find('.'+opts.dropDownClass).css('left',buttonWidth).css('top','0px');
}
$this.find('li').hoverIntent(getDropDown,hideDropDown);
}
);
function getDropDown(){
activeNav = $(this);
showDropDown();
}
function showDropDown(){
activeNav.find('.'+opts.dropDownClass).slideDown({
duration:opts.slideDownDuration,easing:opts.slideDownEasing}
);
}
function hideDropDown(){
activeNav.find('.'+opts.dropDownClass).slideUp({
duration:opts.slideUpDuration,easing:opts.slideUpEasing}
);
//hides the current dropdown}
}
;
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
