脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js网页下拉菜单

JavaScript实现网页下拉菜单效果

 更新时间：2020年11月20日 14:48:14   作者：我是Dreamer啊  
这篇文章主要为大家详细介绍了JavaScript实现网页下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript（js）网页–下拉菜单制作

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

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

设计简单的下拉菜单栏

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 对于防止按钮重复点击的尝试详解

    对于防止按钮重复点击的尝试详解

    这篇文章主要介绍了对于防止按钮重复点击的尝试，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • typescript返回值类型和参数类型的具体使用

    typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • prototype.js简单实现ajax功能示例

    prototype.js简单实现ajax功能示例

    这篇文章主要介绍了prototype.js简单实现ajax功能,结合实例形式分析了prototype.js前台实现ajax与后台struts的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 3种js实现string的substring方法

    3种js实现string的substring方法

    这篇文章主要介绍了3种javascript实现string的substring方法，需要的朋友可以参考下
    2015-11-11
  • 点击按钮出现60秒倒计时的简单js代码(推荐)

    点击按钮出现60秒倒计时的简单js代码(推荐)

    下面小编就为大家带来一篇点击按钮出现60秒倒计时的简单js代码(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 微信小程序dom操作的替代思路实例分析

    微信小程序dom操作的替代思路实例分析

    这篇文章主要介绍了微信小程序dom操作的替代思路,结合实例形式分析了微信小程序通过事件响应、动态操作元素属性来实现dom操作效果,需要的朋友可以参考下
    2018-12-12
  • 在JavaScript中判断整型的N种方法示例介绍

    在JavaScript中判断整型的N种方法示例介绍

    这篇文章主要介绍了在JavaScript中判断整型的N种方法,需要的朋友可以参考下
    2014-06-06
  • JS实现黑客帝国文字下落效果

    JS实现黑客帝国文字下落效果

    看过黑客帝国的朋友或许都对开头的字幕效果很熟悉，自从影片播放以来，网页设计者有不少都在模仿这种文字下落的效果，而且还有文字渐变效果，对我们学习研究JS还是挺有帮助的哦，下面跟着小编一起学习JS 黑客帝国文字下落效果吧
    2015-09-09
  • 深入了解JavaScript代码覆盖

    深入了解JavaScript代码覆盖

    这篇文章主要介绍了深入了解JavaScript代码覆盖 ,代码覆盖提供有关是否以及可选地应用程序的某些部分被执行的频率的信息。它通常用于判定一个测试套件执行特定代码库的全面程度。,需要的朋友可以参考下
    2019-06-06
  • 如何通过JS实现日历简单算法

    如何通过JS实现日历简单算法

    这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10

最新评论