如何在 Divi 菜单中添加时尚的下划线和上划线悬停效果

已发表: 2024-11-25

Divi 菜单是一种多功能且可自定义的导航工具，是使用 Divi 主题生成器构建的网站的核心组件。 Divi 菜单以其灵活性而闻名，它使我们能够创建视觉上令人惊叹且功能强大的导航系统，与您的品牌形象完美契合。

添加时尚的下划线和上划线悬停效果是提升网站菜单的一种方法。这些微妙但视觉上吸引人的动画增强了用户交互并改善了整体浏览体验。

本教程将探讨如何使用自定义 CSS 和设置为 Divi 菜单创建这些动态悬停效果。无论您是经验丰富的网页设计师还是 Divi 初学者，这都将帮助您实现网站的精美和现代外观。本教程简单易懂，并确保专业的完成。

如何在 Divi 菜单中添加时尚的下划线和上划线悬停效果

第 1 步：创建或打开标题模板

在 WordPress 仪表板上，导航至Divi -> Theme Builder 。在“主题生成器”页面上，创建一个新的标题模板，或者通过单击“添加全局标题”按钮或选择要添加时尚下划线或上划线悬停效果的标题模板来打开现有模板。

如果您从头开始创建标题，则输入标题模板后，您可以开始设计它。

添加新的部分和行，然后选择布局（例如，一行、两列）。然后，使用菜单模块等模块进行导航，使用搜索模块（如果需要搜索栏）以及社交媒体关注模块来获取社交图标。在此示例中，我们仅将菜单模块添加到标题中。

接下来，根据您的喜好编辑标题并设置其样式。

第 2 步：添加自定义 CSS

添加标题并设计样式后，我们会将自定义 CSS 添加到您的标题模板中。

单击标题模板编辑器上的齿轮按钮 (️) 转到页面设置。然后，导航到“高级”选项卡 -> “自定义 CSS” 。进入“自定义 CSS”部分后，复制下面的简单 CSS 代码段并将其粘贴到“自定义 CSS”输入字段中。

下面是一个 CSS 片段示例，您可以应用它来将时尚的下划线悬停效果添加到菜单中：

 .et_pb_menu_0_tb_header ul li > a:之前{
    内容： '';
    宽度：0；
    左：50%；
    高度：4px；
    边框半径：2px；
    背景：rgb(145, 255, 2);
    位置：绝对；
    z 索引：-1；
    底部：14 像素；
    不透明度：0；
    过渡：.4s 三次贝塞尔曲线(.27,.03,.30,1.63)；
}

.et_pb_menu_0_tb_header ul li > a:hover:之前{
    宽度：110%；
    左：-5%；
    不透明度：1；
}

.et-menu li li > a{
    宽度：140px；
    内边距：15px；
}

注意：如果要将悬停效果从下划线更改为上划线，可以替换“ bottom: 14px;的属性和值。 ”（例如， top:15px ；）。

就是这样。添加自定义 CSS 后，单击主题生成器页面上的保存更改按钮以应用修改。

要查看结果，请打开网站上包含您刚刚自定义的标题模板的任何页面。

CSS 代码做了什么？

初始状态

 .et_pb_menu_0_tb_header ul li > a:之前{
}

此 CSS 选择器的目标是带有类的无序列表 (< ul >) 的列表项 (< li >) 中的锚点 (< a >) 元素之前的伪元素:before

.et_pb_menu_0_tb_header 。它应用以下样式：

content: '' ：为伪元素创建一个空内容。
width: 0 ：将初始宽度设置为 0 像素。
left: 50% ：将线条元素水平放置在中心。
height: 4px ：将高度设置为 4 像素。
border-radius: 2px ：圆角。
background: rgb(145, 255, 2) ：将背景颜色设置为特定的 RGB 值。
position: absolute ：将行元素定位在其父容器（菜单项）内。
z-index: -1 ：将元素放置在其他内容后面。
bottom: 14px ：将线条元素放置在距菜单项底部 14 像素的位置。
opacity: 0 : 使线元素最初不可见。
transition: .4s cubic-bezier(.27,.03,.30,1.63) ：当元素属性改变时添加平滑过渡效果。

悬停状态

 .et_pb_menu_0_tb_header ul li > a:hover:之前{
}

此选择器的目标与之前相同的伪元素，但仅当锚点悬停在其上时才有效。它修改以下属性：

width: 110% ：将宽度扩展到其菜单项宽度的 110%。
left: -5% ：将线元素向左移动 5%。
opacity: 1 ：使线条元素可见。

额外的造型

 .et-menu li li > a {
    宽度：140px；
    内边距：15px；
}

此 CSS 代码将样式应用于主菜单项内的子菜单项。以下是每个部分的细分：

width: 140px ：将锚点的宽度设置为 140 像素。
padding: 15px ：在锚点内容周围添加 15 像素的填充。

底线

向 Divi 菜单添加时尚的下划线和上划线悬停效果可以显着增强网站的视觉吸引力和用户体验。您可以利用自定义 CSS、深思熟虑的设计调整和 Divi 灵活的主题生成器来创建一个脱颖而出的菜单，同时与您的品牌形象保持一致。

总之，这些悬停效果不仅增加了专业的触感，而且还通过提供清晰的视觉反馈来改进导航。请随意尝试 CSS 代码段中的属性值，例如颜色、粗细、线条位置和动画速度，以根据您网站的独特风格定制效果，确保设计精美且引人入胜。