js制作可以延时消失的菜单


Posted in Javascript onJanuary 13, 2017

本文实例为大家分享了js可延时消失的菜单,供大家参考,具体内容如下

js制作可以延时消失的菜单

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
ul{list-style:none;}
a{text-decoration:none;}
#menu{height:200px;border:1px solid #ccc;margin:40px auto;position:relative;}
#title{position:absolute;left:0;top:0;height:50px;border:1px solid yellow;background:blue;}
#title li{text-align:center;width:80px;height:30px;line-height:30px;float:left;background:#f1f1f1;border-radius:10px;color:#000;font-weight:bold;margin:10px 5px;cursor:pointer;}
#subtitle{height:30px;;border:1px solid #ccc;border-radius:10px;position:absolute;top:60px;left:10px;}
#subtitle:before{content:'';position:absolute;border-top:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #ccc;border-left:7px solid transparent;top:-16px;left:30px;}
#subtitle:after{content:'';position:absolute;border-top:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #fff;border-left:7px solid transparent;top:-15px;left:30px;}
#subtitle a{display:inline-block;height:20px;line-height:20px;margin:5px 5px;float:left;}
#subtitle a:hover{text-decoration:underline;}
</style>
<script>
window.onload = function () {
 var title = document.getElementById('title');
 var subtitle = document.getElementById('subtitle');
 var aA = subtitle.getElementsByTagName('a');
 var aLi = title.getElementsByTagName('li');
 var arr = [
  { title : '首页', subtitle : ['首页1','首页2','首页3']},
  { title : '关于我们', subtitle : ['关于我们1','关于我们2','关于我们3','关于我们4','关于我们5']},
  { title : '课程', subtitle : ['课程1','课程2','课程3']},
  { title : '新闻', subtitle : ['新闻1','新闻2']},
 ];
 var timer = null;



 for ( var i = 0; i < arr.length; i++ ) {
  var oLi = document.createElement('li');
  oLi.innerHTML = arr[i].title;
  oLi.index = i;
  oLi.onmouseover = function () {
   var width = parseInt(getStyle(this,'width'));
   var marginRight = parseInt(getStyle(this,'marginRight'));
   clearTimeout(timer);
   subtitle.innerHTML = '';
   createA(this.index);
   subtitle.style.left = 10 + (width + marginRight) * this.index + 'px';
   subtitle.style.display = 'block';
  }
  oLi.onmouseout = function () {
   timer = setTimeout(function () {
    subtitle.style.display = 'none';
   }, 100);
  }
  title.appendChild(oLi);
 } 
 subtitle.onmouseover = function () {
  clearTimeout(timer);
  this.style.display = 'block';
 }
 subtitle.onmouseout = function () {
  this.style.display = 'none';
 }
 createA(0);

 function createA(index){
  for ( var j = 0; j < arr[index].subtitle.length; j++ ){
   var oA = document.createElement('a');
   oA.innerHTML = arr[index].subtitle[j];
   subtitle.appendChild(oA);
  }
 }
 function getStyle(ele, attr) {
  return ele.currentStyle ? ele.currentStyle[attr] : 
   getComputedStyle(ele,0)[attr];
 }

}
</script>
</head>

<body>
<div id="menu">
 <ul id="title">
 </ul>
 <div id="subtitle">
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JS event使用方法详解
Apr 28 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
原生js实现放大镜
Feb 20 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
很棒的一组js图片轮播特效
Jan 12 #Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
浅谈javascript错误处理
2019/08/11 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
给幼儿园老师的表扬信
2014/01/19 职场文书
材料加工工程求职信
2014/02/19 职场文书
保密协议书范本
2014/04/22 职场文书
交通文明倡议书
2014/05/16 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
入团介绍人意见范文
2015/06/04 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏