JavaScript实现网页下拉菜单效果


Posted in Javascript onNovember 20, 2020

JavaScript(js)网页?下拉菜单制作

在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网

JavaScript实现网页下拉菜单效果

鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。

设计简单的下拉菜单栏

JavaScript实现网页下拉菜单效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>下拉菜单</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   
  }
  a{
   text-decoration: none;
   
  }
  div {
   width: 1200px;
   height: 30px;
   margin: 0px auto;
   background-color: blanchedalmond;
  }
  li {
   list-style: none;
  }
  div li {
   position: relative;
   float: right;
   text-align: center;
   border: 1px solid black;
   line-height: 30px;
   width: 80px;
   height: 30px;
  }
  div ul {
   position: absolute;
   top:30px;
   display: none;
  }
  div ul li{
   
   float: left;
   width: 120px;
   height: 30px;
   background-color: pink;
  }
 </style>
</head>
<body>
 <div>
  <li><a href="#" >邮箱</a>
   <ul>
    <li><a href="#" >免费邮箱</a></li>
    <li><a href="#" >VIP邮箱</a></li>
    <li><a href="#" >企业邮箱</a></li>
    <li><a href="#" >新浪邮箱客户端</a></li>
   </ul>
  </li>
  <li><a href="#" >博客</a>
   <ul>
    <li><a href="#" >博客评论</a></li>
    <li><a href="#" >来读提醒</a></li>
   </ul>
  </li>
  <li><a href="#" >微博</a>
   <ul>
    <li><a href="#" >私信</a></li>
    <li><a href="#" >评论</a></li>
    <li><a href="#" >@我</a></li>
   </ul>
  </li>
  <li ><a href="#" >登录</a></li>

 </div>
 <script>
  var div = document.querySelector('div');
  var lis = div.children;
  for (var i=0;i<lis.length;i++){
   //鼠标经过,出现下拉菜单
   lis[i].onmouseover=function(){
    this.children[1].style.display='block';
   }
   //鼠标离开,隐藏下拉菜单
   lis[i].onmouseout=function(){
    this.children[1].style.display='none';
   }
  }

 </script>
</body>
</html>

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

Javascript 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 #Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 #Javascript
JavaScript 异步时序问题
Nov 20 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript读写json示例
2014/04/11 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
Python实现常见的回文字符串算法
2018/11/14 Python
python如何实现一个刷网页小程序
2018/11/27 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
三字经教学反思
2014/04/26 职场文书
护士找工作求职信
2014/07/02 职场文书
教师个人师德总结
2015/02/06 职场文书
清明扫墓感想
2015/08/11 职场文书
同学会演讲稿
2019/04/02 职场文书
python使用torch随机初始化参数
2022/03/22 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android