当前位置: 代码迷 >> HTML/CSS >> div+css js按钮特效 鼠标移下去显示子菜单
  详细解决方案

div+css js按钮特效 鼠标移下去显示子菜单

热度:317   发布时间:2012-11-06 14:07:00.0
div+css js按钮特效 鼠标移上去显示子菜单
<!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">
<TITLE>按钮</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<LINK href="style/skin2.css" type=text/css rel=stylesheet>

<SCRIPT type=text/javascript>             
var waitting = 1;             
var secondLeft = waitting;             
var timer;                             
var sourceObj;             
var number;             
function getObject(objectId)//获取id的函数              
    {             
        if(document.getElementById && document.getElementById(objectId)) {             
        // W3C DOM             
        return document.getElementById(objectId);             
        } else if (document.all && document.all(objectId)) {             
        // MSIE 4 DOM             
        return document.all(objectId);             
        } else if (document.layers && document.layers[objectId]) {             
        // NN 4 DOM.. note: this won't find nested layers             
        return document.layers[objectId];             
        } else {             
        return false;             
        }             
    }             
function SetTimer()//主导航时间延迟的函数             
    {             
        for(j=1; j <10; j++){             
            if (j == number){             
                if(getObject("mm"+j)!=false){             
                    getObject("mm"+ number).className = "menuhover";             
                    getObject("mb"+ number).className = "";             
                }             
            }             
            else{             
                 if(getObject("mm"+j)!=false){              
                    getObject("mm"+ j).className = "";             
                    getObject("mb"+ j).className = "hide";              
                }             
            }             
        }             
    }             
function CheckTime()//设置时间延迟后             
    {             
        secondLeft--;             
        if ( secondLeft == 0 )             
        {             
        clearInterval(timer);                                     
        SetTimer();                     
        }             
    }             
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟             
    {             
        number = Num;             
        sourceObj = thisobj;             
        secondLeft = 1;             
        timer = setTimeout('CheckTime()',100);             
    }             
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数             
    {             
        clearInterval(timer);             
    }             
</SCRIPT>

<!--导航开始-->
<DIV id=mainmenu_body>
<!--主导航开始-->
    <DIV id=mainmenu_top>
        <UL>
        <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>首页</A> </LI>
        <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CCS导航</A> </LI>
        <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>865171</A> </LI>
        <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS模板</A> </LI>
        <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>后台模板</A> </LI>
        <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS技巧</A> </LI>
        <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS导航菜单</A> </LI>
        <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>HTML+CSS模板</A> </LI>
        <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>SEO优化</A> </LI></UL>
    </DIV>
<!--子导航导航开始-->
    <DIV id=mainmenu_bottom>    
        <DIV class=mainmenu_rbg>      
            <UL class=hide id=mb1>
            <LI><A href="http://www.865171.cn/">本导航非常适合于分类比较多电子商务站等网站的导航模板版</A> </LI>
            <LI><A href="http://www.865171.cn/">此导航很漂亮落</A> </LI>
</UL>
           
            <UL class=hide id=mb2>
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS教程</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
           
            <UL class=hide id=mb3>
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>网上商城</A> </LI>
            <LI><A href="#" target=_parent>网上商城</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>电子商务</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
           
            <UL class=hide id=mb4>
            <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>免费模板网首页</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>MSSQL数据库</A> </LI></UL>
           
            <UL class=hide id=mb5>
            <LI style="DISPLAY: none"><A href="#" target=_parent>服务器租用首页</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用首页</A> </LI>
            <LI><A href="#" target=_parent>服务器租用</A> </LI>
            <LI><A href="#" target=_parent>服务器托管</A> </LI>
            <LI><A href="#" target=_parent>超级机房</A> </LI>
            <LI><A href="#" target=_parent>CDN加速设施</A> </LI></UL>
           
            <UL class=hide id=mb6>
            <LI style="DISPLAY: none"><A href="#" target=_parent>企业邮局首页</A> </LI>
            <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>企业邮局首页</A> </LI>
            <LI><A href="#" target=_parent>绿色G级邮箱</A> </LI>
            <LI><A href="#" target=_parent>绿色企业邮箱</A> </LI></UL>
            <UL class=hide id=mb7>
           
            <LI style="DISPLAY: none"><A href="#" target=_parent>网站制作首页</A> </LI>
            <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>企业建站</A> </LI>
            <LI><A href="#" target=_parent>商城制作</A> </LI>
            <LI><A href="#" target=_parent>个人建站</A> </LI>
            <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
           
            <UL class=hide id=mb8 style="DISPLAY: none">
            <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>代理加盟</A> </LI>
            <LI><A href="#" target=_parent>代理加盟</A> </LI>
            <LI><A href="#" target=_parent>代理加盟</A> </LI></UL>
           
            <UL class=hide id=mb9>
            <LI style="MARGIN-LEFT: 180px"><A href="/agent/">代理加盟</A> </LI>
            <LI><A href="#" target=_parent>联系我们</A> </LI>
            <LI><A href="#" target=_parent>本站通知</A> </LI>
            <LI><A href="#" target=_parent>行业新闻</A> </LI>
            <LI><A href="#" target=_parent>诚聘英才</A> </LI></UL>
        <script src="js/main_nav.js"></script>
        </DIV>   
    </DIV>
</DIV>
</body>
</html>
  相关解决方案