以下是 jquery动态下拉菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态下拉菜单</title>
<link href="css/all.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/site.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2 id="logo"></h2>
<ul id="nav">
<li><a href="#">Item One</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
<li><a href="#">Sub-menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Item Two</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
<li><a href="#">Sub-menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Item Three</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
<li><a href="#">Sub-menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Item Three</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
<li><a href="#">Sub-menu Item 4</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="body">
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit. Sed felis sem, venenatis at ullamcorper a, ornare sit amet nunc. Nunc id massa turpis. In dolor dui, ultricies sit amet mattis vel, cursus non eros. Pellentesque ut mi arcu, ac scelerisque dolor. Phasellus neque nibh, tincidunt quis mattis vel, scelerisque et metus.</p>
<p>Nullam fermentum pulvinar porta. In hac habitasse platea dictumst. Phasellus non nunc diam, in lacinia dolor. Cras nec eros in metus elementum rhoncus. Phasellus viverra malesuada est, eu pharetra sapien mollis at.</p>
<h2>Nam accumsan dui at neque malesuada</h2>
<p>Curabitur vitae neque a lacus malesuada porta. Sed non condimentum risus. Nam malesuada, erat quis facilisis consectetur, neque felis varius ante, vel egestas dui urna a diam.</p> </div>
<div id="sidebar">
<ul id="sidebarNav">
<li><a href="#">Item One</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit.</p>
</li>
<li><a href="#">Item Two</a>
<p>Nullam fermentum pulvinar porta. In hac habitasse platea dictumst. Phasellus non nunc diam, in lacinia dolor.</p>
</li>
<li><a href="#">Item Three</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit. Sed felis sem, venenatis at ullamcorper a, ornare sit amet nunc.</p>
</li>
<li><a href="#">Item Three</a>
<p>Phasellus non nunc diam, in lacinia dolor. Cras nec eros in metus elementum rhoncus. Phasellus viverra malesuada est, eu pharetra sapien mollis at.</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(site.js):
$(document).ready(function(){
// Setup the nav drop-downs$('#nav').nmcDropDown({
show:{
height:'show',opacity:'show'}
}
);
// Setup the sidebar panel drop-downs$('#sidebarNav').nmcDropDown({
trigger:'click',submenu_selector:'p',show:{
height:'show'}
,hide:{
height:'hide'}
}
);
}
);
/** * nmcDropDown plugin - v1.0.3 * Author:Eli Van Zoeren * Copyright (c) 2009 New Media Campaigns * http://www.newmediacampaigns.com **/
(function(a){
a.fn.nmcDropDown=function(b){
var c=a.extend({
}
,a.fn.nmcDropDown.defaults,b);
return this.each(function(){
menu=a(this);
submenus=menu.children("li:has("+c.submenu_selector+")");
if(c.fix_IE){
menu.css("z-index",51).parents().each(function(d){
if(a(this).css("position")=="relative"){
a(this).css("z-index",(d+52))}
}
);
submenus.children(c.submenu_selector).css("z-index",50)}
over=function(){
a(this).addClass(c.active_class).children(c.submenu_selector).animate(c.show,c.show_speed);
return false}
;
out=function(){
a(this).removeClass(c.active_class).children(c.submenu_selector).animate(c.hide,c.hide_speed);
return false}
;
if(c.trigger=="click"){
submenus.toggle(over,out).children(c.submenu_selector).hide()}
else{
if(a().hoverIntent){
submenus.hoverIntent({
interval:c.show_delay,over:over,timeout:c.hide_delay,out:out}
).children(c.submenu_selector).hide()}
else{
submenus.hover(over,out).children(c.submenu_selector).hide()}
}
}
)}
;
a.fn.nmcDropDown.defaults={
trigger:"hover",active_class:"open",submenu_selector:"ul",show:{
opacity:"show"}
,show_speed:300,show_delay:50,hide:{
opacity:"hide"}
,hide_speed:200,hide_delay:100,fix_IE:true}
}
)(jQuery);
/*** hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+* <http://cherne.net/brian/resources/jquery.hoverIntent.html>** @param f onMouseOver function || An object with configuration options* @param g onMouseOut function || Nothing (use configuration options object)* @author Brian Cherne <brian@cherne.net>*/
(function($){
$.fn.hoverIntent=function(f,g){
var cfg={
sensitivity:7,interval:100,timeout:0}
;
cfg=$.extend(cfg,g?{
over:f,out:g}
:f);
var cX,cY,pX,pY;
var track=function(ev){
cX=ev.pageX;
cY=ev.pageY;
}
;
var compare=function(ev,ob){
ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){
$(ob).unbind("mousemove",track);
ob.hoverIntent_s=1;
return cfg.over.apply(ob,[ev]);
}
else{
pX=cX;
pY=cY;
ob.hoverIntent_t=setTimeout(function(){
compare(ev,ob);
}
,cfg.interval);
}
}
;
var delay=function(ev,ob){
ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s=0;
return cfg.out.apply(ob,[ev]);
}
;
var handleHover=function(e){
var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;
while(p&&p!=this){
try{
p=p.parentNode;
}
catch(e){
p=this;
}
}
if(p==this){
return false;
}
var ev=jQuery.extend({
}
,e);
var ob=this;
if(ob.hoverIntent_t){
ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
}
if(e.type=="mouseover"){
pX=ev.pageX;
pY=ev.pageY;
$(ob).bind("mousemove",track);
if(ob.hoverIntent_s!=1){
ob.hoverIntent_t=setTimeout(function(){
compare(ev,ob);
}
,cfg.interval);
}
}
else{
$(ob).unbind("mousemove",track);
if(ob.hoverIntent_s==1){
ob.hoverIntent_t=setTimeout(function(){
delay(ev,ob);
}
,cfg.timeout);
}
}
}
;
return this.mouseover(handleHover).mouseout(handleHover);
}
;
}
)(jQuery);
CSS代码(all.css):
/* * nmcDropDown example * Site by New Media Campaigns */
/* Eric Meyer's Reset styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
:active{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
/* Begin general styles */
html{background:#eee;}
body{font-size:87.5%;/* Reset base size to 14px */
line-height:1.43em;/* Reset line height to 20px */
}
#wrapper{width:800px;margin:0 auto;}
body,h1,h2{font-family:Helvetica,Arial,Geneva,sans-serif;}
p{padding-bottom:1.43em;}
a:link,a:visited{color:#3333cc;text-decoration:none;}
a:focus,a:hover,a:active{text-decoration:underline;}
h1{font-size:1.43em;}
h2{font-size:1.14em;}
/* End text */
/* Begin header styles */
#header{float:left;width:100%;height:60px;}
#logo a{float:left;padding:20px 0;}
#nav{float:right;margin:15px 0;padding:0 20px;height:30px;background:#ccc;border:1px solid #bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#nav li{float:left;position:relative;}
#nav li.open,#nav li:hover{background:#bbb;}
#nav li a{display:block;padding:5px 25px;line-height:20px;color:#444;text-decoration:none;}
#nav li ul{display:none;position:absolute;top:30px;left:0;width:130px;padding:0 0 5px;background:#bbb;border:solid #bbb;border-width:0 1px 1px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.15);-moz-box-shadow:0 3px 3px rgba(0,0,0,0.15);box-shadow:0 3px 3px rgba(0,0,0,0.15);}
#nav li:hover ul{display:block;}
#nav li ul li{float:none;}
#nav li ul li a{padding:8px 10px;display:inline-block;}
#nav li ul li a{display:block;}
#nav li ul li a:hover{background:#444;color:#bbb;}
/* End header */
/* Begin Sidebar */
#sidebar{float:right;width:180px;}
#sidebarNav{padding:10px 0;background:#ccc;border:1px solid #bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#sidebarNav li{border-top:0 solid #ccc;}
#sidebarNav li:hover,#sidebarNav li.open{background:#bbb;}
#sidebarNav li a{display:block;padding:5px 10px;line-height:20px;color:#444;font-weight:bold;text-decoration:none;display:inline-block;}
#sidebarNav li a{display:block;}
#sidebarNav li p{display:none;padding:5px 10px 10px;color:#444;border-top:1px dashed #aaa;}
#sidebarNav li:hover p{display:block;}
/* End Sidebar */
/* Begin body styles */
#body{float:left;clear:both;width:600px;}
/* End body */
CSS代码(ie6.css):
/* * Site Name Styles for Internet Explorer 6 * Site by New Media Campaigns */
CSS代码(ie7.css):
/* * Site Name Styles for Internet Explorer 7 * Site by New Media Campaigns */
分享到QQ
分享到微博
微信扫一扫
