JS+CSS联合打造图文结合动感菜单JAVASCRIPT经典漂亮图文menu资源-CSDN文库

共5个文件

png：2个

html：1个

gif：1个

JS+CSS联合打造图文结合动感菜单

JAVASCRIPT

经典漂亮图文menu

4星 · 超过85%的资源需积分: 10 65 浏览量 2010-03-02 15:47:14 上传评论收藏 161KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

dMenu.rar （5个子文件）

codefans.net

dMenu

menu.html 9KB

images

nav_a.png 190B

nav_ah.png 190B

ico-arrow.gif 9KB

top.jpg 149KB

<!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=gb2312" /> <title>JS+CSS젬북댔芚暠匡써북땡먁꽉데</title> <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-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(images/nav_a.png) no-repeat;color:#fff;text-decoration:none;line-height:38px;} html>body .dropdown UL a:hover{background:url(images/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="images/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="images/nav_ah.png");color: #fff} .dropdown .underline{margin-top:1px;} </style> <script> var DDSPEED = 10; var DDTIMER = 15; // http://www.codefans.net // 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); } } // http://www.codefans.net // 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','')) - parseInt(dist * d) + '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><img src="images/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);">으커꽉데</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=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>

评论收藏

内容反馈