释放下拉菜单的力量-css教程-PHP中文网

释放下拉菜单的力量

WBOY

发布： 2024-07-09 19:50:03

转载

531人浏览过

下拉菜单是访问者访问各种选项的一种有用且节省空间的方式，是网页设计的重要组成部分。这个详尽的教程将涵盖下拉菜单的原理、它们在网页设计中的重要性，以及如何使用 css 伪元素::before 和 ::after 提高其可用性和外观。

了解下拉菜单
下拉菜单有时也称为下拉菜单，是用户界面中常见的交互式组件。通常，它们由父元素（例如按钮或链接）组成，单击时会显示隐藏的选项列表。这些选择可能包括表单选择、导航链接或其他交互式组件。

使用 CSS 伪元素增强下拉菜单

输出：

Enhancing Dropdowns with CSS Pseudo-elements

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

108

查看详情

虽然下拉菜单是网页设计中的常见功能，但可以使用 CSS 伪元素::after 和::before 来改进它们的外观和行为。这些复杂的工具使设计人员能够在不扰乱 HTML 语法的情况下更改下拉菜单，从而实现各种创意的可能性。（了解更多）

让我们看一下示例 1：看看如何使用 CSS 伪元素来创建基本级别的下拉菜单：

<!DOCTYPE html>
<html lang="en">

<头>
    <元字符集=“UTF-8”>
    <meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
    <标题>文档</标题>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel =“样式表”>
    <风格>
        身体 {

            字体系列：“蒙特塞拉特”，无衬线字体；
            字体光学大小：自动；
            字体样式：正常；
        }

        。落下 {
            位置：相对；
            /* 将下拉容器作为参考点 */
            宽度：200px；
            显示：内联块；
        }

        .dropdown-toggle {
            内边距：20px 15px；
            边框：无；
            背景颜色：https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b008CBA；
            光标：指针；
            宽度：100%；
            白颜色;
            字体大小：16px；
            字体粗细：400；
        }

        。下拉式菜单 {
            显示：无；
            /* 最初隐藏菜单 */
            位置：绝对；
            左：0；
            背景颜色：https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff；
            列表样式：无；
            填充：0；
            宽度：100%；
            保证金：0；
            填充：0；
            框阴影：0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z 索引：1；
        }

        .dropdown-menu li {
            显示：块；
        }

        .dropdown-menu li a {
            颜色：黑色;
            内边距：12px 16px；
            文本装饰：无；
            显示：块；
            字体大小：14px；
        }

        /* 更改悬停时下拉链接的颜色 */
        .dropdown-menu li a:hover {
            背景颜色：https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf1f1f1
        }

        .dropdown:悬停 .dropdown-menu {
            /* 悬停时显示菜单 */
            显示：块；
        }

        /* 使用 ::after 的下拉箭头 */
        .dropdown-toggle:after {
            内容： ””;
            位置：绝对；
            顶部：50%；
            右：10 像素；
            变换：翻译Y(-50%)；
            /* 使箭头垂直居中 */
            边框样式：实心；
            边框颜色：https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff透明透明透明；
        }
    </风格>

</头>

<正文>
    <div class="dropdown">
        <button class="dropdown-toggle">选择一个选项</button>
        <ul class="dropdown-menu">
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" rel="nofollow" target="_blank" >选项 1</a></li>
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" rel="nofollow" target="_blank" >选项 2</a></li>
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" rel="nofollow" target="_blank" >选项 3</a></li>
        </ul>
    </div>
</正文>
</html>

登录后复制

在这个例子中，我们有一个基本级别的下拉菜单。
阅读 - 多级下拉菜单

为什么使用下拉菜单？
下拉菜单具有多种优势，使其成为网页设计中的热门选择：

空间效率
下拉菜单通过隐藏项目直到需要它们来节省屏幕空间，使其非常适合空间有限或导航结构复杂的网站。

组织层次结构
设计师可以使用下拉菜单分层组织材料，允许访问者深入挖掘某些类别或部分，而不会一次被太多信息淹没。

用户控制
用户可以使用下拉菜单自定义他们的浏览体验，这节省了界面空间，同时让他们在需要时可以访问更多选项和信息。

一致性
下拉菜单提供了消费者习惯的一致界面模式，从而在多个网站和应用程序中提供更直观和可预测的用户体验。

以上就是释放下拉菜单的力量的详细内容，更多请关注php中文网其它相关文章！