JavaScript实现HTML导航栏下拉菜单

网络编程 2024/12/22 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

JavaScript实现HTML导航栏下拉菜单[悬浮显示]

前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！

样式有点丑。

代码实现（JavaScript）

1、获取要悬浮的对象和菜单对象

//获取需要悬浮的对象
  let show = document.getElementById("show");
  //获取被隐藏的菜单
  let menu = document.getElementById("menu");

2、对悬浮对象添加鼠标悬浮事件

//给show添加鼠标悬浮事件
  show.onmouseover = function(){
     //改变菜单的内联样式display为block，菜单显示
     menu.style.display = "block";
  }

3、对悬浮对象添加鼠标离开事件

如果先触发了悬浮对象show的鼠标悬浮事件，不移动到菜单menu上就鼠标就离开了，会出现菜单无法隐藏的bug！所以在悬浮对象的鼠标离开事件中，我们需要进行判断，如果鼠标移开后的位置不在菜单menu的范围内，则令菜单menu隐藏，否则就继续显示

show.onmouseout = function(){
   //获取菜单栏的坐标值
   let menux = menu.offsetLeft;
   let menuy = menu.offsetTop;
   let menuX = menu.offsetLeft+menu.offsetWidth;
   let menuY = menu.offsetTop+menu.offsetHeight;

   //获取鼠标的坐标值
   let event = window.event;
   let mouseX = event.clientX;
   let mouseY = event.clientY;

   if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){
     menu.style.display = "none";
   }
 }

4、分别给菜单menu添加鼠标悬浮和离开事件

这里见码之意，假如鼠标在menu上就显示，离开了就隐藏

//分别给menu对象绑定鼠标悬浮和鼠标离开事件
menu.onmouseover = function(){
   menu.style.display = "block";
}
menu.onmouseleave = function(){
   menu.style.display = "none";
}

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function(){
      //获取需要悬浮的对象
      let show = document.getElementById("show");
      //获取被隐藏的菜单
      let menu = document.getElementById("menu");

      //给show添加鼠标悬浮事件
      show.onmouseover = function(){
        //改变菜单的内联样式display为block
        menu.style.display = "block";
      }

      //
      show.onmouseout = function(){
        //获取菜单栏的坐标值
        let menux = menu.offsetLeft;
        let menuy = menu.offsetTop;
        let menuX = menu.offsetLeft+menu.offsetWidth;
        let menuY = menu.offsetTop+menu.offsetHeight;

        //获取鼠标的坐标值
        let event = window.event;
        let mouseX = event.clientX;
        let mouseY = event.clientY;

        if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){
          menu.style.display = "none";
        }
      }

      //分别给menu对象绑定鼠标悬浮和鼠标离开事件
      menu.onmouseover = function(){
        menu.style.display = "block";
      }
      menu.onmouseleave = function(){
        menu.style.display = "none";
      }
    }
  </script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    #show {
      margin-top: 10px;
      margin-left: 10px;
      width: 50px;
      height: 30px;
      border: 1px solid #ccc;
      background-color: pink;
    }
    #menu{
      display: none;
      margin-left: 10px;
      width: 50px;
      border: 1px solid #ccc;
      background: rgba(0, 0, 0, 0.6);
    }
    #menu a{
      color: #fff;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="show"><a href="#">Gorho</a></div>
    <ul id="menu">
      <li><a href="#">选项一</a></li>
      <li><a href="#">选项二</a></li>
      <li><a href="#">选项三</a></li>
    </ul>
  </div>
</body>
</html>

写在最后：其实在作品中需要将菜单menu设置成绝对定位，即position:absolute。否则菜单出现后会挤压其他盒子的位置，但笔者赶时间，就没有设置，其实设置也很简单，在css中加上就大功告成了！

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

js,导航栏,下拉菜单

标签：

js,导航栏,下拉菜单

极乐门资源网 Design By www.ioogu.com

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

极乐门资源网 Design By www.ioogu.com

评论“JavaScript实现HTML导航栏下拉菜单”

暂无JavaScript实现HTML导航栏下拉菜单的评论...

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

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

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

更新日志

2024年12月22日

JavaScript实现HTML导航栏下拉菜单

js,导航栏,下拉菜单

vue + el-form 实现的多层循环表单验证

vue打开其他项目页面并传入数据详解

评论“JavaScript实现HTML导航栏下拉菜单”

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

更新日志

友情链接