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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
vue的mixins属性详解
Mar 14 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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版(4)
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
搞笑获奖感言
2014/01/30 职场文书
个人简历中自我评价
2014/02/11 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
优秀党员申报材料
2014/12/18 职场文书
售后服务承诺函格式
2015/01/21 职场文书
会议主持词开场白
2015/05/28 职场文书
2019大学生实习报告
2019/06/21 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Python中异常处理用法
2021/11/27 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
python数据处理之Pandas类型转换
2022/04/28 Python