不错的向下缓冲式菜单特效

最新推荐文章于 2020-07-22 17:11:13 发布

huating008

最新推荐文章于 2020-07-22 17:11:13 发布

阅读量433

点赞数 1

分类专栏： HTML + JS + CSS

HTML + JS + CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>向下缓冲式菜单</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(http://phylab.szu.edu.cn/adpic/nav_a.png) no-repeat;color:#fff;text-decoration:none;line-height:38px;}
html>body .dropdown UL a:hover{background:url(http://phylab.szu.edu.cn/adpic/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://phylab.szu.edu.cn/adpic/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://phylab.szu.edu.cn/adpic/nav_ah.png");color: #fff}
.dropdown .underline{margin-top:1px;}
</style>
<script>
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 = (h.clientHeight + 15) + "px";//'' + 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','')) // - 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></div>
<div id="nav1">
<DL class="dropdown">
    <DT id=m1-ddheader ><a href="javascript:void(null);">首页</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m2-ddheader onMouseOver=ddMenu('m2',1) οnmοuseοut=ddMenu('m2',-1)><a href="javascript:void(null);">规范采购</a></DT>
    <DD id=m2-ddcontent onMouseOver=cancelHide('m2') οnmοuseοut=ddMenu('m2',-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=m3-ddheader onMouseOver=ddMenu('m3',1) οnmοuseοut=ddMenu('m3',-1)><a href="javascript:void(null);">阳光采购</a></DT>
    <DD id=m3-ddcontent onMouseOver=cancelHide('m3') οnmοuseοut=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>
        <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) οnmοuseοut=ddMenu('m4',-1)><a href="javascript:void(null);">永续采购</a></DT>
    <DD id=m4-ddcontent onMouseOver=cancelHide('m4') οnmοuseοut=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>
        <LI><A href="javascript:void(null);">询价采购</A></LI>
      </UL>
    </DD>
</DL>
<DL class="dropdown">
    <DT id=m5-ddheader ><a href="javascript:void(null);">时效展示</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m6-ddheader ><a href="javascript:void(null);">数据展示</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m7-ddheader ><a href="javascript:void(null);">法律法规</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m8-ddheader ><a href="javascript:void(null);">中心介绍</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m9-ddheader ><a href="javascript:void(null);">下载中心</a></DT>
</DL>
<DL class="dropdown">
    <DT id=m10-ddheader onMouseOver=ddMenu('m10',1) οnmοuseοut=ddMenu('m10',-1)><a href="javascript:void(null);">帮助</a></DT>
    <DD id=m10-ddcontent onMouseOver=cancelHide('m10') οnmοuseοut=ddMenu('m10',-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>

</div>
</div>
</div>
</body>
</html>

huating008

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不错的向下缓冲式菜单特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向下缓冲式菜单body {font:12px "宋体";background:#000000;}body,div,ul,li{padding:0;margin:0;}a{text-decorat
复制链接

扫一扫

专栏目录