延迟消失菜单

<!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>

posted @ 2014-12-20 15:07  mayufo  阅读(186)  评论(0编辑  收藏  举报