当前位置：网站主页>JS特效代码>菜单导航>

用JavaScript实现网页下拉菜单效果代码

时间:2020-11-23 来源:网络整理作者:GM源码之家浏览:次推荐

特别说明：本站所有资源都是经过360、金山毒霸检测后上传的，但因JS代码的特殊性；如果您的电脑有重要资料，强烈推荐您使用虚拟机VPS等方式进行调试。

软件语言：
简体中文
授权方式：
共享软件
软件大小：
1 KB
运行环境：
PHP/MySQL
推荐等级：
★★★★☆
下载限制：
免费下载
下载次数：
次
解压密码：
本站默认解压密码：www.gmyuanma.com
资源售价：
0 金币充值金币升级VIP 注册会员
演示地址：
暂无
下载地址：
立即下载

软件介绍

这篇文章主要为大家详细介绍了JavaScript实现网页下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

java

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

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

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

设计简单的下拉菜单栏

代码如下：

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

(责任编辑：GM源码之家)

转载请注明来源：https://www.gmyuanma.com/jsdm/4472.html

上一篇：简单的一行代码立即让您的菜单小图标旋转起来 wordpress傻瓜式美化代码
下一篇：win8风格扁平块状导航菜单

下载须知：

☉本站所有资源不提供任何技术支持，如需提供技术支持请购买官方正版或有偿支持！
☉下载本站资源，如果服务器暂不能下载请过一段时间重试！
☉本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。
☉如果这个软件总是不能下载的请转告我们，谢谢合作!
☉本站所有资源全部收集于互联网，分享目的仅供大家学习与研究，如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到我们的邮箱admin@gmyuanma.com且我们会及时删除！

下载地址【本站强推:BGP优质高防服务器】

↓ ↓ VIP下载专用通道 ↓ ↓

进入下载地址列表 1

进入下载地址列表 2

进入下载地址列表 3

承诺：本站所有资源无病毒，无后门，无弹窗，无干扰链接！

郑重声明：
本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途。若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
我们不承担任何技术及版权问题，且不对任何资源负法律责任。
如无法下载，联系站长索要。
如有侵犯您的版权，请及时联系我们，我们尽快处理。