当前位置: 首页 > 编程笔记 >

JavaScript实现HTML导航栏下拉菜单

卢子民
2023-03-14
本文向大家介绍JavaScript实现HTML导航栏下拉菜单,包括了JavaScript实现HTML导航栏下拉菜单的使用技巧和注意事项,需要的朋友参考一下

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中加上就大功告成了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍jQuery实现的导航下拉菜单效果,包括了jQuery实现的导航下拉菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: 3.jQuery代码: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》

  • 本文向大家介绍iOS实现顶部标签式导航栏及下拉分类菜单,包括了iOS实现顶部标签式导航栏及下拉分类菜单的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些

  • 本文向大家介绍php+jQuery实现的三级导航栏下拉菜单显示效果,包括了php+jQuery实现的三级导航栏下拉菜单显示效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果。分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php 2.index文件 3.nav.html文件 更多关于PHP相关内容感兴趣的读者

  • 我找到了完美的下拉导航栏代码。但我不得不根据自己的需要编辑它。原始完整代码位于此处:https://github.com/vandoan/elli/blob/master/dropdownnav.html,其外观如下:http://codepen.io/xia-lj/pen/kdkoxw HTML: CSS: JS: 我想要的是:下拉导航栏,就像在例子,但有三个按钮“历史”,“哲学”,“物理”。并

  • 本文向大家介绍jquery实现二级导航下拉菜单效果,包括了jquery实现二级导航下拉菜单效果的使用技巧和注意事项,需要的朋友参考一下 下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下 运行效果图: 具体代码: 第一步:确定导航的html格式 第二步:CSS实现导航效果     

  • 本文向大家介绍jQuery实现菜单栏导航效果,包括了jQuery实现菜单栏导航效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。