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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
js实现京东轮播图效果
Jun 30 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
node+vue实现文件上传功能
May 28 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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实现singleton()单例模式实例
2014/11/06 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Python实现两款计算器功能示例
2017/12/19 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
优秀员工自荐书
2013/12/19 职场文书
大学生村官事迹材料
2014/01/21 职场文书
职业生涯规划书范文
2014/03/10 职场文书
同学聚会策划方案
2014/06/06 职场文书
python字典的元素访问实例详解
2021/07/21 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python