对于下拉菜单实现的方法

最新推荐文章于 2024-08-05 22:46:57 发布

梦尘星月

最新推荐文章于 2024-08-05 22:46:57 发布

阅读量331

点赞数

分类专栏： javascript 文章标签： jquery js css html

本文链接：https://blog.csdn.net/qq_40536213/article/details/108874472

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 通过H5中的select标签进行制作
可以通过value属性获取下拉菜单的选项，并利用style.display样式隐藏或显示需要的div。代码如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <select id="test_select">
    <option value="show">显示</option>
    <option value="hide">隐藏</option>
  </select>
  <div id="test">测试模块</div>
  <script>
    window.onload = function () {
      var obj_select = document.getElementById("test_select");
      var obj_div = document.getElementById("test");
      obj_select.onchange = function () {
        obj_div.style.display = this.value == "show" ? "block" : "none";
      }
    }
  </script>
</body>
</html>

2. 通过js来实现
先给菜单box定好宽高加上position:relative;再给里面的内容定上与之相同的宽高;然后给里面的下拉二级菜单加上宽度绝对定位。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }
    .nav li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
    }
    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;
    }
    .nav li a:hover {
      background-color: #eee;
    }
    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #FECC5B;
      border-right: 1px solid #FECC5B;
    }
    .nav ul li {
      border-bottom: 1px solid #FECC5B;
    }
    .nav ul li a:hover {
      background-color: #FFF5DA;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li>
      <a href="#">首页</a>
      <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
      </ul>
    </li>
  </ul>
  <script>
    var lis = document.querySelector('.nav').children;
    for (var i = 0; i < lis.length; i++) {	//可能会有多个下拉菜单
      lis[i].onmouseover = function () {
        this.children[i].style.display = 'block';
      }
      lis[i].onmouseout = function () {
        this.children[i].style.display = 'none';
      }
    }
  </script>
</body>
</html>

3. 通过CSS来实现
与js实现方法基本神似。代码如下：

<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;
            list-style: none;
            text-decoration: none;
        }

        .nav {
            margin: 100px;
        }

        .nav li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav li a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }

        .nav li:hover ul {
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <ul class="nav">
            <li>
                <a href="#">首页</a>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li><a href="#">菜单3</a></li>
                    <li><a href="#">菜单4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

4. 通过jQuery来实现
与js实现方法基本神似，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }
    .nav li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
    }
    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;
    }
    .nav li a:hover {
      background-color: #eee;
    }
    .nav ul {
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #FECC5B;
      border-right: 1px solid #FECC5B;
    }
    .nav ul li {
      border-bottom: 1px solid #FECC5B;
    }
    .nav ul li a:hover {
      background-color: #FFF5DA;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li class="navMenu">
      <a href="#">首页</a>
      <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
      </ul>
    </li>
  </ul>
  <script>
    $(document).ready(function () {
        $(".navMenu").mouseover(function () {	//如果想实现多个下拉菜单，只需在每个li中添加此类名.navMenu即可
            $(this).children('ul').show()
        })
        $(".navMenu").mouseout(function () {
            $(this).children('ul').hide()
        })
    })
  </script>
</body>
</html>

梦尘星月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对于下拉菜单实现的方法

1. 通过H5中的select标签进行制作可以通过value属性获取下拉菜单的选项，并利用style.display样式隐藏或显示需要的div。代码如下：<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit
复制链接

扫一扫

专栏目录