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

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

WBOY

Freigeben： 2023-10-28 09:58:49

Original

1719 Leute haben es durchsucht

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

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>

Nach dem Login kopieren

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;
  }
}

Nach dem Login kopieren

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";
  }
}

Nach dem Login kopieren

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>标签中，并使用.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>

Nach dem Login kopieren

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!