延迟消失菜单

时间：2014-12-20 15:33:42 收藏：0 阅读：253

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
   margin:0px;
   padding:0px;
   list-style-type:none;

   }
a{
   text-decoration:none;
   color:#FF3333;
   padding:0 15px;
   border-right:1px solid #fff;
   }
ul{
   overflow:hidden;
   background:#FCC;
   border-radius:10px;
   display:none;
   margin-top:10px;
   }
#header{
   width:860px;
   margin:10px auto;
   }
#nav{
   background:#F33;
   width:800px;
   height:30px;
   border-radius:20px;
   padding:4px 10px 4px 50px;
   color:#fff;
   display:block;
   }
#nav div,li{
   float:left;
   height:100%;
   line-height:30px;
   list-style:outside none none;
   }
li:last-child a{
   border-right:medium none;
   }
#nav div a{
   color:#fff;
   display:block;
   padding:0 30px;
   border-right:medium none;
   }
#nav .last{
   float:right;
   }
#home{
   width: 350px;
   position: relative;
   left: 60px;
}
#about{
   width: 350px;
   position: relative;
   left: 160px;
}
#work {
   width: 285px;
   position: relative;
   left: 290px;
}
#blog{
   width:290px;
   position: relative;
   left: 380px;
}

</style>

<script type="text/javascript">
window.onload = function ()
{
   var timer = null;

   function $(id,tag)
   {
       if(tag)
           return document.getElementById(id).getElementsByTagName(tag);
       else
           return document.getElementById(id);
   };

   for( var i = 0; i < ($(‘header‘,‘ul‘).length); i++ )
   {
       $(‘nav‘,‘a‘)[i].index = i;
       $(‘header‘,‘ul‘)[i].index = i;

       //主
       $(‘nav‘,‘a‘)[i].onmouseover = function ()
       {
           for ( var j = 0; j < $(‘header‘,‘ul‘).length; j++)
           {
               $(‘header‘,‘ul‘)[j].style.display = ‘none‘;
           }
           $(‘header‘,‘ul‘)[this.index].style.display = ‘block‘;
           clearTimeout(timer);
       };

       $(‘nav‘,‘a‘)[i].onmouseout = function ()
       {
           var that = this.index;
           timer = setTimeout( function ()
           {
               $(‘header‘,‘ul‘)[that].style.display = ‘none‘;
           },200);
       };
       $(‘header‘,‘ul‘)[i].onmouseover = function ()
       {
           this.style.display = ‘block‘;
           clearTimeout(timer);
       };
       $(‘header‘,‘ul‘)[i].onmouseout = function ()
       {
           var that = this;
           timer = setTimeout( function ()
           {
               that.style.display = ‘none‘;
           },1500);
       };
   }
}
</script>
</head>

<body>
<div id="header">
   <div id="nav">
       <div>
           <a href="javascript:">首页</a>
        </div>
        <div>
           <a href="javascript:">关于我们</a>
        </div>
        <div>
           <a href="javascript:">作品</a>
        </div>
        <div>
           <a href="javascript:">博客</a>
        </div>
        <div class="last">
           <a href="javascript:">>>更多</a>
        </div>
    </div>
    <ul id="home">
       <li><a href="#">活动</a></li>
        <li><a href="#">最近活动</a></li>
        <li><a href="#">最近活动</a></li>
        <li><a href="#">最近活动</a></li>
    </ul>
    <ul id="about">
       <li><a href="#">联系我们</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">我们</a></li>
    </ul>
    <ul id="work">
       <li><a href="#">作品1</a></li>
        <li><a href="#">作品1</a></li>
        <li><a href="#">作品1</a></li>
        <li><a href="#">作品1</a></li>
    </ul>
    <ul id="blog">
       <li><a href="#">博客1</a></li>
        <li><a href="#">博客1</a></li>
        <li><a href="#">博客1</a></li>
        <li><a href="#">博客1</a></li>
    </ul>
</div>
</body>
</html>