使用 CSS 悬停菜单 - 分步指南

使用 CSS 悬停菜单 - 分步指南

HTML

对于 HTML，我们有一个类为“menu_item”的 div 元素，它代表一个菜单项。

在“menu_item”中，第一个元素是一个带有标题的 span 元素。现在我只放一个菜单项：“Shop”，稍后我会添加其他的。

在标题下方，我们有一个带有“子菜单”类的 div 元素。这是直到悬停才能看到的子菜单。

在“子菜单”中，我们将所有子菜单作为跨度元素放置。

它应该看起来像这样：

 <div class="menu_item">  
 <span>店铺</span><!--  title  --> <div class="submenu"> <!--  submenus  -->  
 <span>衬衫</span>  
 <span>鞋</span>  
 <span>包</span>  
 </div>  
 </div>

CSS

“menu_item” 类将用于对齐所有内容。

 .menu_item {  
 宽度：80px；  
 显示：弯曲；  
 弹性方向：列；  
 证明内容：中心；  
 对齐项目：居中；  
 }

具有“menu_item”类的元素内的所有 span 元素都将具有 1px 透明边框，因为我们稍后会在悬停时对其进行着色

我们只需要添加过渡、指针、填充（上下 5px，左右 0），然后将文本居中对齐。

 .menu_item 跨度 {  
 边框：1px 实心透明；  
 过渡：.3s；  
 填充：5px 0；  
 光标：指针；  
 宽度：100%；  
 文本对齐：居中；  
 }

在悬停时，使用“>”选择器，我们将选择直接子项，即标题，以及颜色顶部和底部边框，如前所述。

当然，我们会添加转场属性，让边框颜色平滑变化。

 .menu_item:hover > span {  
 边框颜色：#000 透明；  
 过渡：.3s；  
 }

我们将减少所有子菜单项的字体并将它们按列对齐。

我们将宽度设置为 0，然后在悬停时返回 80px，这样我们就会有一个很好的外观效果。

让我们也隐藏所有溢出的东西。

而且，当然，过渡，这样出现的效果，前面提到的，我们会很顺利。

 .子菜单{  
 字体大小：14px；  
 显示：弯曲；  
 弹性方向：列；  
 宽度：0px；  
 溢出：隐藏；  
 过渡：.3s；  
 }

现在只需在悬停时将宽度设置回 80px 并添加过渡。

 .menu_item：悬停 .submenu {  
 宽度：80px；  
 过渡：.3s；  
 }

现在我们将光标属性设置为子菜单项的指针。

 .子菜单：悬停{  
 光标：指针；  
 }

并为每个子菜单添加顶部和底部填充并将文本居中对齐。

 .子菜单跨度{  
 填充：5px 0；  
 文本对齐：居中；  
 }

悬停时，只需更改背景颜色。我将设置透明黑色。

 .子菜单跨度：悬停{  
 背景色：rgba(0, 0, 0, .1);  
 }

就是这样。

我们现在可以在菜单中添加更多元素。

对于具有子菜单的菜单项，只需复制并粘贴相同的 html 代码。

至于没有子菜单的菜单项，只需添加新的带有标题的 menu_item，并且没有子菜单元素。

 <!--  New menu item without submenus  -->  
 <div class="menu_item">  
 <span>家</span><!--  title  -->  
 </div> <div class="menu_item">  
 <span>店铺</span><!--  title  --> <div class="submenu"> <!--  submenus  -->  
 <span>衬衫</span>  
 <span>鞋</span>  
 <span>包</span>  
 </div>  
 </div> <!--  New menu item with submenus  -->  
 <div class="menu_item">  
 <span>设置</span><!--  title  --> <div class="submenu"> <!--  submenus  -->  
 <span>帐户</span>  
 <span>密码</span>  
 <span>安全</span>  
 </div>  
 </div>

视频教程：

您可以通过视频教程找到整个代码 这里 .

谢谢你的阅读❤️

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11778/02260317