JavaScript实现HTML导航栏下拉菜单


Posted in Javascript onNovember 25, 2020

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

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

JavaScript实现HTML导航栏下拉菜单

样式有点丑。

代码实现(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中加上就大功告成了!

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

Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vue实现购物车的监听
Apr 20 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
js实现筛选功能
Nov 24 #Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 #Javascript
JavaScript实现移动端拖动元素
Nov 24 #Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 #Javascript
js实现抽奖功能
Nov 24 #Javascript
You might like
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php cookie 详解使用实例
2016/11/03 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Node.js简单入门前传
2017/08/21 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
学生会部长竞聘书
2014/03/31 职场文书
保护环境标语
2014/06/09 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
社区务虚会发言材料
2014/10/20 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
工作年限证明模板
2015/06/15 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
Js类的构建与继承案例详解
2021/09/15 Javascript
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电