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

网络编程 2024/5/19 佚名

3 2 1

本文实例为大家分享了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 "menu">
 <ul id="title">
 </ul>
 <div id="subtitle">
 </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,菜单

标签：

js,菜单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js制作可以延时消失的菜单”

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

暂无“js制作可以延时消失的菜单”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

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

js,菜单

js实现tab选项卡切换功能

原生js实现下拉框功能（支持键盘事件）

评论“js制作可以延时消失的菜单”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接