延迟消失菜单

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

时间: 2024-10-11 04:51:17

延迟消失菜单的相关文章

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类: 1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果 1.2自定义控件 1.3组合控件案例演示: 案例:优酷菜单demo 三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失 ①布局实现: 三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示) 由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件 控件上background=”@android:color/t

原生js应用setTimeout实现下拉菜单

今天实现一个很简单的下拉菜单的小实例,也就是鼠标移入菜单,它的子菜单出现并延迟消失.大概效果如下图: 来看下布局: <div class="menu" id="menu">主菜单</div> <ul class="mList" id="mList"> <li>下拉菜单一</li> <li>下拉菜单二</li> <li>下拉菜单三&l

Cocos2d-X中实现菜单特效

Cocos2d-X中可以讲菜单和动作结合起来使用实现菜单特效 程序实例1:使用菜单和动作的组合实现菜单特效<一> #include "MenuItem.h" CCScene* MenuItem::scene() { CCScene* scene = CCScene::create(); MenuItem* layer = MenuItem::create(); scene->addChild(layer); return scene; } bool MenuItem:

( 转)从四分钟到两秒——谈谈客户端性能优化的一些最佳实践

转:http://www.cnblogs.com/marvin/p/WinformOptimizSkill.html 背景 最近跟售后经理吃饭,他跟我再次谈起两年前为公司临时写的一个客户端,仍然非常激动的跟我说,这个客户端完爆了公司其他版本的客户端,包括最老的Delphi写的,Asp.Net写的,以及最新的Wpf写的客户端.无论是多么大的界面(集成的机房多),这个系统都是瞬间打开,而且运行非常稳定,一旦成功部署之后基本没有任何问题. 这个版本的客户端仅仅只是一个临时替代的版本:原来的Delphi

基于jQuery的tooltips插件--poshytip

摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框 Install: 下载poshytip插件,解压之后将文件夹src拷贝到项目中,然后引入js和css文件. 1 <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.cs

[经验] Win7减肥攻略(删文件不删功能、简化优化系统不简优化性能)

☆心梦无痕☆ 发表于 2014-1-24 11:15:04 https://www.itsk.com/thread-316471-1-11.html 首先 开启Administrator 用户 删除其他用户! 1.删除休眠文件 “以管理员身份运行,所有程序→附件→命令提示符”,右击选择“以管理员身份运行”,进入命令提示符后,手工输入“powercfg-h off” 这是干什么的,木星人也会知道……2.关闭系统保护计算机右键属性——高级管理设置——系统保护3.转移虚拟内存计算机右键属性——高级管理

原生js实现tooltip提示框的效果

在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望. 比如这个tooltip的效果展示: 这个便是tooltip提示框的效果. 在Hbulider上的代码展示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8

Transactional replication-如何跳过一个事务

在transactional replication, 经常会遇到数据同步延迟的情况.有时候这些延迟是由于在publication中执行了一个更新,例如update ta set col=? Where ?,这个更新包含巨大的数据量.在subscription端,这个更新会分解成多条命令(默认情况下每个数据行一个命令),应用到subscription上. 不得已的情况下,我们需要跳过这个大的事务,让replication继续运行下去. 现在介绍一下transactional replicatio

Android Material Design 系列之 SnackBar详解

SnackBar是google Material Design提供的一种轻量级反馈组件.支持从布局的底部显示一个简洁的提示信息,支持手动滑动取消操作,同时在同一个时间内只能显示一个SnackBar. 那Snackbar是如何实现的呢?我们主要讨论Snackbar的显示逻辑,包括:延迟消失和同一时间只支持一个Snackbar显示 首先我们先看下Snackbar用到的两个类 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang