欢迎来到GM源码之家!会员签到可免费领金币,开通会员下载免金币(本站金币1:10)
广告位出租
广告位招租
用JavaScript实现网页下拉菜单效果代码
时间:2020-11-23 来源:网络整理 作者:GM源码之家 浏览:次  推荐
特别说明:本站所有资源都是经过360、金山毒霸检测后上传的,但因JS代码的特殊性;如果您的电脑有重要资料,强烈推荐您使用虚拟机VPS等方式进行调试。
  • 软件语言:

    简体中文
  • 授权方式:

    共享软件
  • 软件大小:

    1 KB
  • 运行环境:

    PHP/MySQL
  • 推荐等级:

    ★★★★☆
  • 下载限制:

    免费下载
  • 下载次数:

  • 解压密码:

    本站默认解压密码:www.gmyuanma.com
  • 资源售价:

    0 金币 充值金币升级VIP注册会员
  • 演示地址:

    暂无
  • 下载地址:

    立即下载

软件介绍

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

java

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


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

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


设计简单的下拉菜单栏

20201120144525774.png


代码如下:

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

下载须知:

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

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

  • ↓ ↓ VIP下载专用通道 ↓ ↓
  • 进入下载地址列表 1
  • 进入下载地址列表 2
  • 进入下载地址列表 3
  • 承诺:本站所有资源无病毒,无后门,无弹窗,无干扰链接!

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

    评论区

    会员头像
    说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!