以下是 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="#" title="医院概览">医院概览</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#">医院简介</a><a class="" href="#/?_26/Index.aspx">领导团队</a><a class="" href="#">组织架构</a><a class="" href="#/?_28/Index.aspx">历史沿革</a><a class="" href="#">图片协和</a><a class="" href="#/?_37/Index.aspx">协和建筑</a><a class="" href="#">医院文化</a><a class="" href="#/?_31/Index.aspx">所获荣誉</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#" title="新闻动态">新闻动态</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#">医院新闻</a><a class="" href="#/?_43/Index.aspx">医院公告</a><a class="" href="#/?_44/Index.aspx">媒体聚焦</a><a class="" href="#/?_45/Index.aspx">协和院报</a></div></blockquote>
</li>
<li class="s">|</li>
<li id="TopNavDept"><a class="go" href="#/?_14/Index.aspx" title="科室导航">科室导航</a>
<blockquote>
<div class="ChildNavIn">
<div class="NavDeptIn"><h6><a title="非手术科室" href="#/?_97/Index.aspx">非手术科室</a></h6>
<div class="NavDeptInList"><a class="First " href="#/?_407/Index.aspx">内科学系</a><a class="" href="#/?_98/Index.aspx">心内科</a><a class="" href="#/?_99/Index.aspx">呼吸内科</a><a class="" href="#/?_100/Index.aspx">消化内科</a><a class="" href="#/?_101/Index.aspx">肾内科</a><a class="" href="#/?_102/Index.aspx">血液内科</a><a class="" href="#/?_103/Index.aspx">风湿免疫科</a><a class="" href="#/?_104/Index.aspx">感染内科</a><a class="" href="#/?_105/Index.aspx">普通内科</a><a class="" href="#/?_106/Index.aspx">肿瘤内科</a><a class="" href="#/?_107/Index.aspx">MICU</a><a class="" href="#/?_108/Index.aspx">内分泌科</a><a class="" href="#/?_119/Index.aspx">肠外肠内营养科</a><a class="" href="#/?_121/Index.aspx">重症医学科(ICU)</a><a class="" href="#/?_123/Index.aspx">儿科</a><a class="" href="#/?_124/Index.aspx">神经科</a><a class="" href="#/?_131/Index.aspx">心理医学科</a><a class="" href="#/?_128/Index.aspx">皮肤科</a><a class="" href="#/?_140/Index.aspx">变态反应科</a><a class="" href="#/?_132/Index.aspx">急诊科</a><a class="" href="#/?_129/Index.aspx">中医科</a></div></div>
<div class="NavDeptIn"><h6><a title="手术科室" href="#/?_109/Index.aspx">手术科室</a></h6>
<div class="NavDeptInList"><a class="First " href="#/?_506/Index.aspx">外科学系</a><a class="" href="#/?_110/Index.aspx">基本外科</a><a class="" href="#/?_111/Index.aspx">骨科</a><a class="" href="#/?_112/Index.aspx">心外科</a><a class="" href="#/?_148/Index.aspx">胸外科</a><a class="" href="#/?_113/Index.aspx">泌尿外科</a><a class="" href="#/?_114/Index.aspx">神经外科</a><a class="" href="#/?_115/Index.aspx">血管外科</a><a class="" href="#/?_116/Index.aspx">整形美容外科</a><a class="" href="#/?_117/Index.aspx">乳腺外科</a><a class="" href="#/?_118/Index.aspx">肝脏外科</a><a class="" href="#/?_122/Index.aspx">妇产科</a><a class="" href="#/?_125/Index.aspx">眼科</a><a class="" href="#/?_126/Index.aspx">耳鼻喉科</a><a class="" href="#/?_127/Index.aspx">口腔科</a><a class="" href="#/?_120/Index.aspx">麻醉科</a></div></div>
<div class="NavDeptIn"><h6><a title="诊断相关科室" href="#/?_48/Index.aspx">诊断相关科室</a></h6>
<div class="NavDeptInList"><a class="First " href="#/?_137/Index.aspx">超声诊断科</a><a class="" href="#/?_143/Index.aspx">病理科</a><a class="" href="#/?_135/Index.aspx">检验科</a><a class="" href="#/?_133/Index.aspx">放射科</a><a class="" href="#/?_134/Index.aspx">放射治疗科</a><a class="" href="#/?_136/Index.aspx">核医学科</a><a class="" href="#/?_146/Index.aspx">营养科</a><a class="" href="#/?_142/Index.aspx">输血科</a><a class="" href="#/?_141/Index.aspx">药剂科</a><a class="" href="#/?_139/Index.aspx">病案科</a><a class="" href="#/?_144/Index.aspx">物理医学康复科</a><a class="" href="#/?_147/Index.aspx">疾病分类中心</a></div></div>
<div class="NavDeptInOther"><a href="#/?_49/Index.aspx" title="国际医疗部" target="_blank">国际医疗部</a><a href="#/?_50/Index.aspx" title="健康医学部(体检中心)" target="_blank">健康医学部(体检中心)</a><a href="#/?_145/Index.aspx" title="临床药理研究中心" target="_blank">临床药理研究中心</a></div>
</div>
</blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_171/Index.aspx" title="医师介绍">医师介绍</a> </li>
<li class="s">|</li>
<li><a class="go" href="#/?_16/Index.aspx" title="医学教育">医学教育</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_58/Index.aspx">教育动态</a><a class="" href="#/?_59/Index.aspx">本科生教育</a><a class="" href="#/?_60/Index.aspx">研究生教育</a><a class="" href="#/?_61/Index.aspx">住院专科医师培养</a><a class="" href="#/?_62/Index.aspx">继续教育</a><a class="" href="#/?_63/Index.aspx">进修国际合作</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_17/Index.aspx" title="科学研究">科学研究</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_64/Index.aspx">科研动态</a><a class="" href="#/?_65/Index.aspx">科技支撑</a><a class="" href="#/?_66/Index.aspx">学术队伍</a><a class="" href="#/?_67/Index.aspx">科研成果展示</a><a class="" href="http://jsjjc.buyan.cn/">科研处外网</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_18/Index.aspx" title="科学研究">健康讲堂</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_69/Index.aspx">科普文章</a><a class="" href="#/?_70/Index.aspx">健康视频</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_19/Index.aspx" title="护理天地">护理天地</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_71/Index.aspx">护理概况</a><a class="" href="#/?_72/Index.aspx">历史回眸</a><a class="" href="#/?_73/Index.aspx">护理新闻</a><a class="" href="#/?_74/Index.aspx">品牌团队</a><a class="" href="#/?_75/Index.aspx">教学科研</a><a class="" href="#/?_76/Index.aspx">临床护理</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_170/Index.aspx" title="患者服务">患者服务</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_24/Index.aspx">医保网页</a><a class="" href="#/?_21/Index.aspx">患者查询</a><a class="" href="#/?_15/Index.aspx">就诊指南</a></div></blockquote>
</li>
<li class="s">|</li>
<li><a class="go" href="#/?_20/Index.aspx" title="党群工作">党群工作</a>
<blockquote><div class="ChildNavIn"><a class="First " href="#/?_79/Index.aspx">工作动态</a><a class="" href="#/?_80/Index.aspx">基层党建</a><a class="" href="#/?_81/Index.aspx">统战工作</a><a class="" href="#/?_82/Index.aspx">纪检监察</a><a class="" href="#/?_84/Index.aspx">职工之家</a><a class="" href="#/?_85/Index.aspx">夕阳红专栏</a><a class="" href="#/?_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
分享到微博
微信扫一扫
