前端下拉菜单的三种实现方法

最新推荐文章于 2024-05-05 01:02:17 发布

yctang0811

最新推荐文章于 2024-05-05 01:02:17 发布

阅读量9.3k

点赞数 5

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_42409913/article/details/102874429

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一种方式：（CSS实现）

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {  margin: 0;  padding: 0;}
    .nav {  background-color: #eee;  width: 600px;  height: 40px;  margin: 0 auto;}
    ul {  list-style: none;}
    ul li {  float: left;  line-height: 40px;  text-align: center;  position: relative;}
    a {  text-decoration: none;  color: #000;  display: block;  padding: 0 10px;}
    a:hover {  color: #fff;  background-color: #666;}
    ul li ul li {  float: none;  background-color: #eee;}
    ul li ul {  position: absolute;  left: 0px;  top: 40px;  display: none;}
    ul li ul li a:hover {  background-color: blue;}
    ul li:hover ul {  display: block;}
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li><a href="#">第一页</a>
        <ul>
          <li><a href="#">副一</a></li>
        </ul>
      </li>
      <li><a href="#">第二页</a>
        <ul>
          <li><a href="#">副一</a> </li>
        </ul>
      </li>
      <li><a href="#">第三页</a></li>
    </ul>
  </div>
</body>

第二种方式：（js实现）

<body>
  <script>
    function showSecondLeave(li) {
      var Li = li.getElementsByTagName('ul')[0]
      Li.style.display = "block"
    }
    function hideSecondLeave(li){
      var Li = li.getElementsByTagName('ul')[0]
      Li.style.display = "none"
    }
  </script>
  <div class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li onmouseover="showSecondLeave(this)" onmouseout="hideSecondLeave(this)"><a href="#">第二页</a>
        <ul>
          <li><a href="#">副一</a></li>
          <li><a href="#">副二</a></li>
        </ul>
      </li>
      <li onmouseover="showSecondLeave(this)" onmouseout="hideSecondLeave(this)"><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>
      <li><a href="#">第五页</a></li>
    </ul>
  </div>
</body>

第三种方式：（jQuery实现）

<body>
  <script>
    $(function () {
      $(".navMenu").mouseover(function () {
        $(this).children('ul').show()
      })
      $(".navMenu").mouseout(function () {
        $(this).children('ul').hide()
      })
    })
  </script>
  <div class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li class="navMenu"><a href="#">第二页</a>
        <ul>
          <li><a href="#">副一</a></li>
          <li><a href="#">副二</a></li>
        </ul>
      </li>
      <li class="navMenu"><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>
      <li><a href="#">第五页</a></li>
    </ul>
  </div>
</body>

yctang0811

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端下拉菜单的三种实现方法

第一种方式：（CSS实现）<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...
复制链接

扫一扫

专栏目录