PHP前端开发

释放下拉菜单的力量

百变鹏仔 3个月前 (09-19) #CSS
文章标签 菜单

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

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

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

输出:

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

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

        <meta name="“viewport”content" device-width>文档标题&gt;    <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&amp;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透明透明透明;        }    风格&gt;头&gt;    <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>正文&gt;

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

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

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

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

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

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