Heim >Web-Frontend >CSS-Tutorial >Schritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS

Schritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS

WBOYOriginal: 2023-10-28 09:58:491731Durchsuche

Die Navigationsleiste ist eines der häufigsten Elemente auf Webseiten, und das Dropdown-Tab-Menü ist ein Effekt, der häufig in verwendet wird Die Navigationsleiste kann weitere Navigationsoptionen bieten. In diesem Artikel wird erläutert, wie Sie mithilfe von reinem CSS einen responsiven Dropdown-Menüeffekt für die Navigationsleiste implementieren.

Schritt 1: Erstellen Sie eine grundlegende HTML-Struktur

Wir müssen zunächst eine grundlegende HTML-Struktur zur Demonstration erstellen und der Navigationsleiste einige Stile hinzufügen. Das Folgende ist eine einfache HTML-Struktur:

<!DOCTYPE html>
<html>
  <head>
    <title>响应式导航栏</title>
    <style>
      /* 导航栏样式 */
      .navbar {
        background-color: #333;
        overflow: hidden;
      }
      
      /* 导航栏选项样式 */
      .navbar a {
        float: left;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      
      /* 导航栏选项悬停样式 */
      .navbar a:hover {
        background-color: #ddd;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#">首页</a>
      <a href="#">新闻</a>
      <a href="#">图片</a>
      <a href="#">视频</a>
      <a href="#">论坛</a>
      <a href="#">联系我们</a>
      <a href="javascript:void(0);" class="icon" onclick="responsiveMenu()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </body>
</html>

Schritt 2: CSS-Stile hinzufügen

Als nächstes müssen wir einige CSS-Stile hinzufügen, um den Effekt einer responsiven Navigationsleiste zu erzielen. Wir können Medienabfragen verwenden, um Stile für verschiedene Bildschirmgrößen zu definieren. Das Folgende ist der CSS-Stil des Beispiels:

/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 导航栏选项隐藏样式 */
.navbar a:not(:first-child) {
  display: none;
}

/* 响应式导航栏样式 */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  
  /* 显示导航栏选项 */
  .navbar a.icon {
    float: right;
    display: block;
  }
  
  /* 导航栏选项悬停样式 */
  .navbar.responsive a.icon {
    background-color: #ddd;
    color: #333;
  }
  
  /* 导航栏选项悬停后的下拉菜单样式 */
  .navbar.responsive .navbar-dropdown {
    display: block;
  }
  
  /* 导航栏下拉菜单样式 */
  .navbar-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1;
  }
  
  /* 导航栏下拉菜单选项样式 */
  .navbar-dropdown a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* 导航栏下拉菜单选项悬停样式 */
  .navbar-dropdown a:hover {
    background-color: #f1f1f1;
  }
}

Schritt 3: JavaScript-Code hinzufügen

Um den Effekt der responsiven Navigationsleiste zu realisieren, müssen wir auch JavaScript verwenden, um die Erweiterung und Reduzierung des Menüs zu steuern. Hier ist ein einfaches JavaScript-Codebeispiel:

/* 响应式导航栏菜单展开与收起的函数 */
function responsiveMenu() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

Schritt 4: Dropdown-Menüinhalt hinzufügen

Zuletzt müssen wir den Inhalt des Dropdown-Menüs zur Navigationsleiste hinzufügen. Dieser Teil des Inhalts wird zur Stilkontrolle in eine <div>标签中，并使用<code>.navbar-dropdown-Klasse eingefügt. Hier ist ein Beispiel:

<div class="navbar-dropdown">
  <a href="#">音乐</a>
  <a href="#">游戏</a>
  <a href="#">电影</a>
  <a href="#">书籍</a>
</div>

Zusammenfassend können wir durch die oben genannten vier Schritte einen einfachen, rein auf CSS reagierenden Navigationsleisten-Dropdown-Tab-Menüeffekt erzielen. Mithilfe von Medienabfragen und JavaScript können wir Inhalte in verschiedenen Bildschirmgrößen anzeigen und ausblenden, um Benutzern ein besseres Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erkundung der CSS-Textdekorationseigenschaften: Textdekoration und TexttransformationNächster Artikel：Erkundung der CSS-Textdekorationseigenschaften: Textdekoration und Texttransformation

In Verbindung stehende Artikel

Mehr sehen