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 相关文章推荐
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
JS实现多选框的操作
Jun 24 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
Js sort排序使用方法
2011/10/17 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python如何使用腾讯云发送短信
2020/09/17 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
追悼会子女答谢词
2014/01/28 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
会计学毕业生求职信
2014/06/25 职场文书
优秀纪检干部材料
2014/08/27 职场文书
计算机实训报告总结
2014/11/05 职场文书
开业庆典致辞
2015/08/01 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python