以下是 jQuery绿色风格滑动下拉导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.pack.js"></script>
</head>
<body>
<div id="MutiNav">
<ul class="multiUl">
<li><a class="go" href="/" title="网站首页">网站首页</a></li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com" title="医院概览">医院概览</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com">医院简介</a><a class="" href="http://www.baidu.com/?_26/Index.aspx">领导团队</a><a class="" href="http://www.baidu.com">组织架构</a><a class="" href="http://www.baidu.com/?_28/Index.aspx">历史沿革</a><a class="" href="http://www.baidu.com">图片协和</a><a class="" href="http://www.baidu.com/?_37/Index.aspx">协和建筑</a><a class="" href="http://www.baidu.com">医院文化</a><a class="" href="http://www.baidu.com/?_31/Index.aspx">所获荣誉</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com" title="新闻动态">新闻动态</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com">医院新闻</a><a class="" href="http://www.baidu.com/?_43/Index.aspx">医院公告</a><a class="" href="http://www.baidu.com/?_44/Index.aspx">媒体聚焦</a><a class="" href="http://www.baidu.com/?_45/Index.aspx">协和院报</a></div></blockquote>
</li>
<li class="s">|</li>
<li id="TopNavDept"><a class="go" href="http://www.baidu.com/?_14/Index.aspx" title="科室导航">科室导航</a>
<blockquote>
<div class="ChildNavIn">
<div class="NavDeptIn"><h6><a title="非手术科室" href="http://www.baidu.com/?_97/Index.aspx">非手术科室</a></h6>
<div class="NavDeptInList"><a class="First " href="http://www.baidu.com/?_407/Index.aspx">内科学系</a><a class="" href="http://www.baidu.com/?_98/Index.aspx">心内科</a><a class="" href="http://www.baidu.com/?_99/Index.aspx">呼吸内科</a><a class="" href="http://www.baidu.com/?_100/Index.aspx">消化内科</a><a class="" href="http://www.baidu.com/?_101/Index.aspx">肾内科</a><a class="" href="http://www.baidu.com/?_102/Index.aspx">血液内科</a><a class="" href="http://www.baidu.com/?_103/Index.aspx">风湿免疫科</a><a class="" href="http://www.baidu.com/?_104/Index.aspx">感染内科</a><a class="" href="http://www.baidu.com/?_105/Index.aspx">普通内科</a><a class="" href="http://www.baidu.com/?_106/Index.aspx">肿瘤内科</a><a class="" href="http://www.baidu.com/?_107/Index.aspx">MICU</a><a class="" href="http://www.baidu.com/?_108/Index.aspx">内分泌科</a><a class="" href="http://www.baidu.com/?_119/Index.aspx">肠外肠内营养科</a><a class="" href="http://www.baidu.com/?_121/Index.aspx">重症医学科(ICU)</a><a class="" href="http://www.baidu.com/?_123/Index.aspx">儿科</a><a class="" href="http://www.baidu.com/?_124/Index.aspx">神经科</a><a class="" href="http://www.baidu.com/?_131/Index.aspx">心理医学科</a><a class="" href="http://www.baidu.com/?_128/Index.aspx">皮肤科</a><a class="" href="http://www.baidu.com/?_140/Index.aspx">变态反应科</a><a class="" href="http://www.baidu.com/?_132/Index.aspx">急诊科</a><a class="" href="http://www.baidu.com/?_129/Index.aspx">中医科</a></div></div>
<div class="NavDeptIn"><h6><a title="手术科室" href="http://www.baidu.com/?_109/Index.aspx">手术科室</a></h6>
<div class="NavDeptInList"><a class="First " href="http://www.baidu.com/?_506/Index.aspx">外科学系</a><a class="" href="http://www.baidu.com/?_110/Index.aspx">基本外科</a><a class="" href="http://www.baidu.com/?_111/Index.aspx">骨科</a><a class="" href="http://www.baidu.com/?_112/Index.aspx">心外科</a><a class="" href="http://www.baidu.com/?_148/Index.aspx">胸外科</a><a class="" href="http://www.baidu.com/?_113/Index.aspx">泌尿外科</a><a class="" href="http://www.baidu.com/?_114/Index.aspx">神经外科</a><a class="" href="http://www.baidu.com/?_115/Index.aspx">血管外科</a><a class="" href="http://www.baidu.com/?_116/Index.aspx">整形美容外科</a><a class="" href="http://www.baidu.com/?_117/Index.aspx">乳腺外科</a><a class="" href="http://www.baidu.com/?_118/Index.aspx">肝脏外科</a><a class="" href="http://www.baidu.com/?_122/Index.aspx">妇产科</a><a class="" href="http://www.baidu.com/?_125/Index.aspx">眼科</a><a class="" href="http://www.baidu.com/?_126/Index.aspx">耳鼻喉科</a><a class="" href="http://www.baidu.com/?_127/Index.aspx">口腔科</a><a class="" href="http://www.baidu.com/?_120/Index.aspx">麻醉科</a></div></div>
<div class="NavDeptIn"><h6><a title="诊断相关科室" href="http://www.baidu.com/?_48/Index.aspx">诊断相关科室</a></h6>
<div class="NavDeptInList"><a class="First " href="http://www.baidu.com/?_137/Index.aspx">超声诊断科</a><a class="" href="http://www.baidu.com/?_143/Index.aspx">病理科</a><a class="" href="http://www.baidu.com/?_135/Index.aspx">检验科</a><a class="" href="http://www.baidu.com/?_133/Index.aspx">放射科</a><a class="" href="http://www.baidu.com/?_134/Index.aspx">放射治疗科</a><a class="" href="http://www.baidu.com/?_136/Index.aspx">核医学科</a><a class="" href="http://www.baidu.com/?_146/Index.aspx">营养科</a><a class="" href="http://www.baidu.com/?_142/Index.aspx">输血科</a><a class="" href="http://www.baidu.com/?_141/Index.aspx">药剂科</a><a class="" href="http://www.baidu.com/?_139/Index.aspx">病案科</a><a class="" href="http://www.baidu.com/?_144/Index.aspx">物理医学康复科</a><a class="" href="http://www.baidu.com/?_147/Index.aspx">疾病分类中心</a></div></div>
<div class="NavDeptInOther"><a href="http://www.baidu.com/?_49/Index.aspx" title="国际医疗部" target="_blank">国际医疗部</a><a href="http://www.baidu.com/?_50/Index.aspx" title="健康医学部(体检中心)" target="_blank">健康医学部(体检中心)</a><a href="http://www.baidu.com/?_145/Index.aspx" title="临床药理研究中心" target="_blank">临床药理研究中心</a></div>
</div>
</blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_171/Index.aspx" title="医师介绍">医师介绍</a> </li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_16/Index.aspx" title="医学教育">医学教育</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_58/Index.aspx">教育动态</a><a class="" href="http://www.baidu.com/?_59/Index.aspx">本科生教育</a><a class="" href="http://www.baidu.com/?_60/Index.aspx">研究生教育</a><a class="" href="http://www.baidu.com/?_61/Index.aspx">住院专科医师培养</a><a class="" href="http://www.baidu.com/?_62/Index.aspx">继续教育</a><a class="" href="http://www.baidu.com/?_63/Index.aspx">进修国际合作</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_17/Index.aspx" title="科学研究">科学研究</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_64/Index.aspx">科研动态</a><a class="" href="http://www.baidu.com/?_65/Index.aspx">科技支撑</a><a class="" href="http://www.baidu.com/?_66/Index.aspx">学术队伍</a><a class="" href="http://www.baidu.com/?_67/Index.aspx">科研成果展示</a><a class="" href="http://jsjjc.buyan.cn/">科研处外网</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_18/Index.aspx" title="科学研究">健康讲堂</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_69/Index.aspx">科普文章</a><a class="" href="http://www.baidu.com/?_70/Index.aspx">健康视频</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_19/Index.aspx" title="护理天地">护理天地</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_71/Index.aspx">护理概况</a><a class="" href="http://www.baidu.com/?_72/Index.aspx">历史回眸</a><a class="" href="http://www.baidu.com/?_73/Index.aspx">护理新闻</a><a class="" href="http://www.baidu.com/?_74/Index.aspx">品牌团队</a><a class="" href="http://www.baidu.com/?_75/Index.aspx">教学科研</a><a class="" href="http://www.baidu.com/?_76/Index.aspx">临床护理</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_170/Index.aspx" title="患者服务">患者服务</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_24/Index.aspx">医保网页</a><a class="" href="http://www.baidu.com/?_21/Index.aspx">患者查询</a><a class="" href="http://www.baidu.com/?_15/Index.aspx">就诊指南</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="http://www.baidu.com/?_20/Index.aspx" title="党群工作">党群工作</a>
<blockquote><div class="ChildNavIn"><a class="First " href="http://www.baidu.com/?_79/Index.aspx">工作动态</a><a class="" href="http://www.baidu.com/?_80/Index.aspx">基层党建</a><a class="" href="http://www.baidu.com/?_81/Index.aspx">统战工作</a><a class="" href="http://www.baidu.com/?_82/Index.aspx">纪检监察</a><a class="" href="http://www.baidu.com/?_84/Index.aspx">职工之家</a><a class="" href="http://www.baidu.com/?_85/Index.aspx">夕阳红专栏</a><a class="" href="http://www.baidu.com/?_87/Index.aspx">社会工作</a><a class="" href="http://youth.pumch.cn/">团员青年</a></div></blockquote>
</li>
</ul>
<script type="text/javascript">
var mst;
jQuery(".multiUl li").hover(function(){
var curItem = jQuery(this);
mst = setTimeout(function(){//延时触发
curItem.find("blockquote").slideDown('fast');
mst = null;
});
}, function(){
if(mst!=null)clearTimeout(mst);
jQuery(this).find("blockquote").slideUp('fast');
});
</script>
<div class="clear"></div>
</div>
</body>
</html>
CSS代码(default.css):
@charset "utf-8";/* CSS Document */
body,ul,li,blockquote{PADDING:0px;MARGIN:0px;}
ul,li{list-style-type:none;}
html,body{margin:0px;padding:0px;}
a{COLOR:#105b49;TEXT-DECORATION:none;outline:none}
a:hover{COLOR:#0a382d;TEXT-DECORATION:underline}
.clear{width:100%;height:0px;line-height:1px;font-size:1px;clear:both;}
#MutiNav{font-size:13px;color:#FFFFFF;background-image:url(nav.png);background-repeat:repeat-x;background-position:left top;}
#MutiNav A{TEXT-DECORATION:none}
#MutiNav .multiUl{width:100%;height:35px;CLEAR:both;display:block;}
#MutiNav .multiUl LI{display:block;float:left;height:35px;LINE-HEIGHT:35px;POSITION:relative;}
#MutiNav .multiUl LI A.go{PADDING-RIGHT:4px;DISPLAY:inline-block;PADDING-LEFT:4px;Z-INDEX:300;PADDING-BOTTOM:0px;MARGIN:0px 7px;WIDTH:auto;COLOR:#edf7ea;LINE-HEIGHT:35px;PADDING-TOP:0px;HEIGHT:35px;TEXT-ALIGN:center}
#MutiNav .multiUl LI A.on{FONT-WEIGHT:bold;COLOR:#dfe8d9;TEXT-DECORATION:none}
#Nav LI.s{DISPLAY:inline;FLOAT:left;WIDTH:8px;COLOR:#517b55;LINE-HEIGHT:35px;HEIGHT:35px;TEXT-ALIGN:center}
#MutiNav .multiUl LI BLOCKQUOTE{DISPLAY:none;Z-INDEX:201;LEFT:0px;POSITION:absolute;TOP:30px;HEIGHT:auto}
#MutiNav .multiUl LI BLOCKQUOTE .ChildNavIn{PADDING-RIGHT:0px;PADDING-LEFT:0px;BACKGROUND:url(icon.png) #1b453b no-repeat 37px -730px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:100px;COLOR:#dee6e9;PADDING-TOP:10px;HEIGHT:auto;TEXT-ALIGN:center}
#MutiNav .multiUl LI BLOCKQUOTE .ChildNavIn A{PADDING-RIGHT:4px;DISPLAY:inline;PADDING-LEFT:4px;FLOAT:left;PADDING-BOTTOM:2px;MARGIN:3px 0px 3px 6px;WIDTH:80%;COLOR:#dee6e9;LINE-HEIGHT:18px;PADDING-TOP:2px;BORDER-BOTTOM:#255f51 1px dotted;TEXT-ALIGN:center}
#MutiNav .multiUl LI BLOCKQUOTE A:hover{BACKGROUND:#2c705f;COLOR:#fefbc2! important}
#MutiNav .multiUl #TopNavDept{}
#MutiNav .multiUl #TopNavDept BLOCKQUOTE{DISPLAY:none;LEFT:-254px}
#MutiNav .multiUl #TopNavDept BLOCKQUOTE .ChildNavIn{BACKGROUND:#1b453b;WIDTH:1000px}
#MutiNav .multiUl #TopNavDept .NavDeptIn{DISPLAY:inline;BACKGROUND:none transparent scroll repeat 0% 0%;FLOAT:left;MARGIN:0px 0px 0px 20px;WIDTH:310px;TEXT-ALIGN:left! important}
#MutiNav .multiUl #TopNavDept .NavDeptIn A{FLOAT:none;BORDER-TOP-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-LEFT-STYLE:none;BORDER-BOTTOM-STYLE:none}
#TopNavDept .NavDeptIn H6{OVERFLOW:hidden;WIDTH:310px;LINE-HEIGHT:23px! important;BORDER-BOTTOM:#2c705f 1px solid;HEIGHT:23px! important;TEXT-ALIGN:left}
#TopNavDept .NavDeptIn H6 A{DISPLAY:block;MARGIN:0px;LINE-HEIGHT:23px;HEIGHT:23px! important}
#MutiNav .multiUl #TopNavDept .NavDeptIn .NavDeptInList{MARGIN-TOP:5px;OVERFLOW:hidden;WIDTH:auto}
#MutiNav .multiUl #TopNavDept .NavDeptIn .NavDeptInList A{FLOAT:left;MARGIN:2px 1px 0px;WIDTH:auto;COLOR:#acbc9e;WHITE-SPACE:nowrap}
#MutiNav .multiUl #TopNavDept .NavDeptInOther{CLEAR:both;PADDING-RIGHT:0px;PADDING-LEFT:20px;PADDING-BOTTOM:0px;MARGIN:5px 0px;OVERFLOW:hidden;PADDING-TOP:5px}
#MutiNav .multiUl #TopNavDept .NavDeptInOther A{PADDING-LEFT:13px;BACKGROUND:url(icon.png) no-repeat 0px -116px;MARGIN:0px 7px;WIDTH:auto;BORDER-TOP-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-LEFT-STYLE:none;BORDER-BOTTOM-STYLE:none}
/*代码整理 - www.97zzw.com*/
分享到QQ
分享到微博
微信扫一扫
