CSS - 下拉菜单

上一页
下一页

下拉菜单是一种用户界面元素，包含选项列表。它允许用户通过将鼠标悬停或点击触发元素来从列表中选择一个值。它通常用于导航菜单、表单以及网站的其他交互式组件。

下拉菜单是使用 HTML 的无序列表（<ul>）和列表项（<li>）元素创建的。

本章将介绍如何使用 CSS 对下拉菜单元素进行样式设置和排列，控制其外观和行为。

CSS 下拉菜单 - 基本示例

让我们来看一个带有选项列表的下拉菜单的简单示例。当您将鼠标悬停在“选择一个选项”文本上时，会出现一个带有选项的下拉菜单。

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 0;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <span class="dropdown-button">Select an Option</span>
        <div class="dropdown-menu">
            <p>Option 1</p>
            <p>Option 2</p>
            <p>Option 3</p>
        </div>
    </div>
</body>
</html>

在上面的示例中

  • 使用任何 HTML 元素，例如 <span> 或 <button> 来打开下拉内容。

  • 要创建下拉内容或菜单，请使用容器元素（如 >div<）。

  • 使用 CSS 来包装和定位下拉内容。

  • .dropdown 类使用 position:relative。此属性将下拉菜单放置在下拉按钮正下方（使用 position:absolute）。

  • .dropdown-menu 类包含实际的下拉内容。默认情况下它是隐藏的，并在悬停时显示。

  • CSS box-shadow 属性使下拉菜单看起来像一张 卡片。

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

CSS 下拉菜单 - 悬停效果

悬停下拉菜单是一种用户界面元素，当用户将光标悬停在触发元素上时，会显示下拉菜单。当用户将光标移出触发元素时，下拉菜单通常会消失。

让我们来看一个示例。此示例在下拉框内使用锚标记，并对其进行样式设置以适应带样式的下拉按钮。

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单 - 点击式下拉菜单

当您点击下拉菜单时，它会展开以显示可用选项，您可以通过点击其中一个选项来选择它。

让我们来看一个示例

<html>
<head>
<style>
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;

    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
    .show {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const button = document.querySelector('.dropdown-button');
            const dropdownContent = document.querySelector('.dropdown-menu');

            button.addEventListener('click', function () {
                dropdownContent.classList.toggle('show');
            });

            window.addEventListener('click', function (event) {
                if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
                    dropdownContent.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>

CSS 下拉菜单 - 右对齐菜单

您可以通过对包含下拉菜单的 <div> 应用 float: right 样式来将下拉菜单放置在屏幕右侧。此排列将菜单移到屏幕的右侧。

让我们来看一个示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: right;">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单 - 左对齐菜单

您可以通过将 float: left 样式添加到包含下拉菜单的 <div> 来实现左对齐的下拉菜单。此排列将菜单移到屏幕的最左侧。

让我们来看一个示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: left;">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单 - 带图片

您可以通过在文本选项旁边包含图片来增强下拉菜单。当您将鼠标悬停在图片上时，会出现一个更大尺寸的图片以及描述。

让我们来看一个示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-img-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;

    }
    .dropdown:hover .dropdown-img-menu {
        display: block;
    }
    .img-descripition {
        padding: 15px;
        background-color: rgb(38, 222, 53);
        text-align: center;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <img src="images/red-flower.jpg" alt="Cinque Terre" width="200" height="100">
        <div class="dropdown-img-menu">
            <div class="img-descripition">Red color flower</div>
            <img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150">
        </div>
    </div>
</body>
</html>

CSS 下拉菜单 - 带导航栏

下拉导航栏通常出现在网站导航菜单中。它由一个包含链接列表的水平栏组成。当用户将鼠标悬停或点击特定链接时，会出现一个下拉菜单，显示与所选链接相关的其他导航选项或内容。

让我们来看一个示例

<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #208926;
    }
    li {
        float: left;
    }
    li a,
    .dropdown-option {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover,
    .dropdown:hover .dropdown-option {
        background-color: #f39a1d;
    }

    li.dropdown {
        display: inline-block;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #44e2d5;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 120px;
    }
    .dropdown-menu a {
        color: black;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .dropdown-menu a:hover {
        background-color: #ee3131;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Tutorialspoints</a></li>
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-option">Articles</a>
            <div class="dropdown-menu">
                <a href="#">HTML</a>
                <a href="#">CSS</a>
                <a href="#">Bootstrap</a>
            </div>
        </li>
    </ul>
</body>
</html>
打印页面
上一页
下一页
广告