如何使用 CSS 创建下拉导航栏?


下拉导航是一个包含下拉选项的导航栏。你会在很多网站上看到导航栏的第 3 或第 4 个项目具有下拉功能。

当在同一类别中需要在导航栏项目上呈现多个选项时,这时就需要开发一个下拉导航栏。假设您提供多种类型的服务,那么您不能在导航栏上公开呈现所有这些服务,而是将它们全部放在下拉菜单中。这类似于可悬停的下拉菜单

创建下拉导航栏的步骤

在开始创建下拉导航栏之前,我们将首先使用 HTML 创建一个下拉结构。

步骤 1 - 添加 HTML

我们将创建导航栏的结构,并且我们还将在导航栏中使用 font-awesome 图标包,以便在下拉选项上显示向下箭头图标。要了解如何包含图标包,请查看此文章

  • 我们将使用<nav> HTML 标签来包裹菜单的所有项目,以使其在导航栏中保持对齐。
  • 然后我们将创建下拉结构,为此我们可以使用<button><a><p>任何元素。
  • 现在我们将使用<div<<button>以及<a>标签创建导航菜单的下拉项目。
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" 
         href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
   <nav>
      <a class="links" href="#">Home</a>
      <a class="links" href="#">Services</a>
      <a class="links" href="#">Products</a>
      <div class="dropdown-menu">
         <button class="menu-btn">Dropdown
             <i class="fa fa-caret-down"></i>
         </button>
         <div class="menu-content">
             <a class="links-hidden" href="#">Contact Us</a>
             <a class="links-hidden" href="#">Visit Us</a>
             <a class="links-hidden" href="#">About Us</a>
         </div>
      </div>
   </nav>
</body>
</html>

步骤 2 - 添加 CSS

在这里,我们根据需要设计了按钮和下拉菜单。

  • 我们使用了 CSS 'display: inline-block'(CSS display 属性)来使项目水平排列,就像我们在不同的导航栏上看到的那样。
  • 为了隐藏下拉菜单内容,我们使用了 CSS 'display: hiden'。并使用CSS position 属性来使菜单项相对于其包含块进行定位,并且其边缘使用边距属性进行放置。
  • 为了在所有其他元素上呈现下拉菜单项,我们使用了CSS z-index 属性
<style>
    .menu-btn {
        background-color: #040008;
        color: white;
        padding: 16px;
        font-weight: bolder;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        border: none;
    }
    
    .dropdown-menu {
        position: relative;
        display: inline-block;
    }
    
    .menu-content {
        display: none;
        position: absolute;
        background-color: #3ff360;
        min-width: 110px;
        z-index: 1;
    }
    
    nav {
        background-color: #017575;
    }
    
    .links,
    .links-hidden {
        display: inline-block;
        color: rgb(255, 255, 255);
        padding: 8px 12px;
        text-decoration: none;
        font-size: 12px;
    }
    .links-hidden {
        display: block;
    }
    .links {
        display: inline-block;
    }
    
    .links-hidden:hover,
    .links:hover {
        transform: scale(1.2);
      
    }
    
    .dropdown-menu:hover .menu-content {
        display: block;
    }

</style>

完整的示例代码

在下面的示例中,我们将上述步骤的伪代码组合成完整的代码,以实现下拉导航栏。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" 
         href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
         .menu-btn {
             background-color: #040008;
             color: white;
             padding: 16px;
             font-weight: bolder;
             font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
             border: none;
         }
         
         .dropdown-menu {
             position: relative;
             display: inline-block;
         }
         
         .menu-content {
             display: none;
             position: absolute;
             background-color: #3ff360;
             min-width: 110px;
             z-index: 1;
         }
         
         nav {
             background-color: #017575;
         }
         
         .links,
         .links-hidden {
             display: inline-block;
             color: rgb(255, 255, 255);
             padding: 8px 12px;
             text-decoration: none;
             font-size: 12px;
         }
         .links-hidden {
             display: block;
         }
         .links {
             display: inline-block;
         }
         
         .links-hidden:hover,
         .links:hover {
             transform: scale(1.2);
           
         }
         
         .dropdown-menu:hover .menu-content {
             display: block;
         }
   
   </style>
</head>
<body>
   <nav>
      <a class="links" href="#">Home</a>
      <a class="links" href="#">Services</a>
      <a class="links" href="#">Products</a>
      <div class="dropdown-menu">
         <button class="menu-btn">Dropdown
             <i class="fa fa-caret-down"></i>
         </button>
         <div class="menu-content">
             <a class="links-hidden" href="#">Contact Us</a>
             <a class="links-hidden" href="#">Visit Us</a>
             <a class="links-hidden" href="#">About Us</a>
         </div>
      </div>
   </nav>
</body>
</html>

输出

结论

在这篇文章中,我们学习了如何使用 HTML 和 CSS 创建下拉导航栏。记住,在用户点击或悬停下拉菜单之前将其隐藏,并在用户点击或悬停元素时进行呈现是最重要的部分。

更新于: 2024年7月3日

14K+ 阅读量

启动您的职业生涯

通过完成课程获得认证

开始学习
广告