网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 比较实用的二级下拉导航菜单
比较实用的二级下拉导航菜单
作者:admin 发布时间:2010-11-10 3:59:55 发布人: admin
<!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> <title>比较实用的二级下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{font:12px "宋体";background:#000000;} body,div,ul,li{padding:0;margin:0;} a{text-decoration:none;color:#fff;} #body{width:830px;margin:0 auto;} #header{height:250px;} #nav1{height:38px;top:214px;} .dropdown{position:relative;float:left;padding:0 0 3px 0;margin-top:0px;} *+html .dropdown{padding:14px 0 3px 0;_padding:0 0 3px 0;margin-top:0px;} .dropdown dt{padding:12px 0 8px 0;width:82px;cursor:pointer;color:#fff;text-align:center;} * html .dropdown dt{padding:0 0 8px 0;} *+html .dropdown dt{padding:0 0 8px 0;} .dropdown a{text-align:center;} .dropdown dd{z-index:99999;position:absolute;width:92px;display:none;overflow:hidden;opacity:0;margin-top:35px;margin-left:-2px;} .dropdown ul{list-style-type:none;width:82px;} .dropdown li{display:inline;} html>body .dropdown ul a{width:88px;height:38px;display:block;background:url(http://web.archive.org/web/20150918012640im_/http://myjs.jz123.cn/img/nav_a.png) no-repeat;color:#fff;text-decoration:none;line-height:38px;} html>body .dropdown ul a:hover{background:url(http://web.archive.org/web/20150918012640im_/http://myjs.jz123.cn/img/nav_ah.png) no-repeat;color:#fff;} * html .dropdown ul a{width:88px;height:38px;display:block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="http://myjs.jz123.cn/img/nav_a.png");color:#fff;text-decoration:none;line-height:38px;cursor:hand;} * html .dropdown ul a:hover{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="http://myjs.jz123.cn/img/nav_ah.png");color:#fff;} .dropdown .underline{margin-top:1px;} </style> <script language="javascript"> var DDSPEED = 10; var DDTIMER = 15; // main function to handle the mouse events // function ddMenu(id,d) { var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); clearInterval(c.timer); if(d == 1) { clearTimeout(h.timer); if(c.maxh && c.maxh <= c.offsetHeight) { return; } else if(!c.maxh) { c.style.top = '-' + c.offsetHeight + 'px'; c.style.display = 'block'; c.style.height = 'auto'; c.maxh = c.offsetHeight; c.style.height = '0px'; } c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); } else { h.timer = setTimeout(function(){ddCollapse(c)},50); } } // collapse the menu // function ddCollapse(c){ c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER); } // cancel the collapse if a user rolls over the dropdown cent // function cancelHide(id){ var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); clearTimeout(h.timer); clearInterval(c.timer); if(c.offsetHeight < c.maxh){ c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); } } // incrementally expand/contract the dropdown and change the opacity // function ddSlide(c,d){ var currh = c.offsetHeight; var dist; if(d == 1){ dist = (Math.round((c.maxh - currh) / DDSPEED)); }else{ dist = (Math.round(currh / DDSPEED)); } if(dist <= 1 && d == 1){ dist = 1; } c.style.top = parseInt(c.style.top.replace('px','')); c.style.height = currh + (dist * d) + 'px'; if(getOs()=="Firefox") { c.style.opacity = currh / c.maxh; c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')'; } if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){ clearInterval(c.timer); } } function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } </script> </head> <body> <div id="body"> <div id="header"> <div style="padding-bottom:10px;"><img src="http://web.archive.org/web/20150918012640im_/http://myjs.jz123.cn/img/top.jpg"></div> <div id="nav1"> <dl class="dropdown"> <dt id="m1-ddheader" onmouseover="ddMenu('m1',1)" onmouseout="ddMenu('m1',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m1-ddcontent" onmouseover="cancelHide('m1')" onmouseout="ddMenu('m1',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m2-ddheader" onmouseover="ddMenu('m2',1)" onmouseout="ddMenu('m2',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m2-ddcontent" onmouseover="cancelHide('m2')" onmouseout="ddMenu('m2',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m3-ddheader" onmouseover="ddMenu('m3',1)" onmouseout="ddMenu('m3',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m3-ddcontent" onmouseover="cancelHide('m3')" onmouseout="ddMenu('m3',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单1</a></li> <li><a href="javascript:void(null);">栏目菜单2</a></li> <li><a href="javascript:void(null);">栏目菜单3</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m4-ddheader" onmouseover="ddMenu('m4',1)" onmouseout="ddMenu('m4',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m4-ddcontent" onmouseover="cancelHide('m4')" onmouseout="ddMenu('m4',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m5-ddheader" onmouseover="ddMenu('m5',1)" onmouseout="ddMenu('m5',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m5-ddcontent" onmouseover="cancelHide('m5')" onmouseout="ddMenu('m5',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m6-ddheader" onmouseover="ddMenu('m6',1)" onmouseout="ddMenu('m6',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m6-ddcontent" onmouseover="cancelHide('m6')" onmouseout="ddMenu('m6',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m7-ddheader" onmouseover="ddMenu('m7',1)" onmouseout="ddMenu('m7',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m7-ddcontent" onmouseover="cancelHide('m7')" onmouseout="ddMenu('m7',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m8-ddheader" onmouseover="ddMenu('m8',1)" onmouseout="ddMenu('m8',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m8-ddcontent" onmouseover="cancelHide('m8')" onmouseout="ddMenu('m8',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m9-ddheader" onmouseover="ddMenu('m9',1)" onmouseout="ddMenu('m9',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m9-ddcontent" onmouseover="cancelHide('m9')" onmouseout="ddMenu('m9',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="m10-ddheader" onmouseover="ddMenu('m10',1)" onmouseout="ddMenu('m10',-1)"><a href="javascript:void(null);">导航菜单</a></dt> <dd id="m10-ddcontent" onmouseover="cancelHide('m10')" onmouseout="ddMenu('m10',-1)"> <ul> <li><a href="javascript:void(null);">栏目菜单</a></li> </ul> </dd> </dl> </div> </div> </div> </body> </html>
比较实用的二级下拉导航菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
纯CSS倾斜菱形导航菜单
下一篇:文章:
随机加载的CSS样式
本类浏览排行 »
随机加载的CSS样式
比较实用的二级下拉导航菜单
纯CSS倾斜菱形导航菜单
输入序列号时常用的让焦点自动跳转的特效..
复制到剪贴板的按钮
获取指定图片的url地址的JS脚本
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
本站推荐文章 »
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单