文章: 阅读:

CSS Dropdown 下拉菜单

CSSCSS

前言

  • 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1、下拉菜单

  • 当鼠标移动到指定元素上时，会出现下拉菜单。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h1>鼠标移动后出现下拉菜单</h1>
    <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

    <div class="dropdown">
        <span>鼠标移动到我这！</span>
        
        <div class="dropdown-content">
            <p>Qian Chia 工作室</p>
            <p>www.qianchia.com</p>
        </div>
    </div>

  • 效果

  • 解析

    • HTML 部分：

      • 我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 <button> 元素。

      • 使用容器元素 (如：<div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

      • 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

    • CSS 部分：

      • .dropdown 类使用 position: relative;, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position: absolute;) 的右下角位置。

      • .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。可以随意修改它。注意: 如果想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% (overflow: auto; 设置可以在小尺寸屏幕上滚动)。

      • 使用 box-shadow 属性让下拉菜单看起来像一个 “卡片”。

      • :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

1.1 创建下拉菜单

  • 创建下拉菜单，并允许用户选取列表中的某一项。

  • 这个实例类似前面的实例，但是在下拉列表中添加了链接，并设置了样式。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h2>下拉菜单</h2>
    <p>鼠标移动到按钮上打开下拉菜单。</p>

    <div class="dropdown">
        <button class="dropbtn">下拉菜单</button>
        <div class="dropdown-content">
            <a href="https://blog.qianchia.com">博客</a>
            <a href="https://mp.qianchia.com">小程序</a>
            <a href="https://www.qianchia.com/tools/tools.html">工具</a>
        </div>
    </div>

  • 效果

    下拉菜单


    鼠标移动到按钮上打开下拉菜单。




    博客
    小程序
    工具

2、下拉内容对齐方式

  • 如果想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加代码 right: 0;

  • 一般 left 和 right 在一个样式中只能使用一次，同时使用会出现兼容问题，当浏览器解释代码的时候发现 left 和 right 同时存在时，就会放弃解释 right。放弃解释后优先级就排不上用场了，即使优先级最高的 !important 也不会作用。这就好比战场上有两个士兵 A 和 B，B 被打死了，那么即使医疗兵医术再高也救不了他了。所以 left 优先级高于 right。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <h2>下拉内容的对齐方式</h2>
    <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

    <div class="dropdown" style="float: left;">                    <!-- float: left; -->
        <button class="dropbtn">左</button>
        <div class="dropdown-content" style="left: 0;">            <!-- left: 0; -->
            <a href="https://blog.qianchia.com">博客</a>
            <a href="https://mp.qianchia.com">小程序</a>
            <a href="https://www.qianchia.com/tools/tools.html">工具</a>
        </div>
    </div>

    <div class="dropdown" style="float: right;">                    <!-- float: right; -->
        <button class="dropbtn">右</button>
        <div class="dropdown-content" style="right: 0;">            <!-- right: 0; -->
            <a href="https://blog.qianchia.com">博客</a>
            <a href="https://mp.qianchia.com">小程序</a>
            <a href="https://www.qianchia.com/tools/tools.html">工具</a>
        </div>
    </div>

  • 效果

    下拉内容的对齐方式


    left 和 right 属性指定了下拉内容是从左到右或从右到左。

3、图片下拉

  • 在下拉菜单中添加图片。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .image {
            text-align: center;
            padding-top: 10px;
        }

        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <h2>下拉图片</h2>
    <p>移动鼠标到图片上显示下拉内容。</p>

    <div class="dropdown">
        <img src="https://demo.qianchia.com/media/image/demo/demo9.png" width="100" height="100" />
        
        <div class="dropdown-content">
            <div class="image">
                <img src="https://demo.qianchia.com/media/image/demo/demo9.png" width="20" height="20" />
            </div>
            <div class="desc">Qian Chia 工作室</div>
        </div>
    </div>

  • 效果

    下拉图片


    移动鼠标到图片上显示下拉内容。







    Qian Chia 工作室


4、导航栏下拉

  • 在导航条上添加下拉菜单。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover, .dropdown:hover, .dropbtn {
            background-color: #111;
        }

        .dropdown {
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接 1</a>
                <a href="#">链接 2</a>
                <a href="#">链接 3</a>
            </div>
        </div>
    </ul>

    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

  • 效果

      

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、下拉菜单
    1. 2.1. 1.1 创建下拉菜单
  3. 3. 2、下拉内容对齐方式
  4. 4. 3、图片下拉
  5. 5. 4、导航栏下拉
隐藏目录