Heim > Artikel > Web-Frontend > Menü ohne JS öffnen und schließen

Menü ohne JS öffnen und schließen

php中世界最好的语言Original: 2018-06-01 13:52:541651Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zum Öffnen und Schließen des Menüs ohne Verwendung von JS vorstellen. Schauen wir uns das unten an.

Wenn ich eine Webseite mit einer Menüleiste schreibe, verwende ich grundsätzlich responsives Design, um mich an das mobile Endgerät anzupassen, z. B. um unwichtige Menüoptionen auszublenden oder eine Menüschaltfläche zu erstellen, um das Öffnen und Schließen des Menüs zu steuern . So etwas in der Art. Ich habe immer JavaScript verwendet, um das Menü zu öffnen und zu schließen, aber kürzlich habe ich jemanden gesehen, der CSS und HTML verwendet hat, um diese Funktion im Internet zu implementieren, was mir wirklich das Gefühl gegeben hat, solange ich einen Hammer in meinem habe Hand, alles kann zu Nägeln verarbeitet werden.

Werfen wir vor der Implementierung einen Blick auf das HTML-Tag und den Eingabetyp:

label

label-Element bietet dem Benutzer keine besonderen Effekte. Es verbessert jedoch die Benutzerfreundlichkeit für Mausbenutzer. Dieses Steuerelement wird ausgelöst, wenn Sie auf den Text innerhalb des Beschriftungselements klicken. Das heißt, wenn der Benutzer die Beschriftung auswählt, richtet der Browser den Fokus automatisch auf das Formularsteuerelement, das sich auf die Beschriftung bezieht.

Das for-Attribut des Labels sollte mit dem id-Attribut des zugehörigen Elements identisch sein.

Eingabetyp: Kontrollkästchen

<input type="checkbox"> Definieren Sie das Kontrollkästchen.

Kontrollkästchen ermöglichen es dem Benutzer, null oder mehr Optionen aus einer begrenzten Anzahl von Optionen auszuwählen.

Das Folgende ist der Democode:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>menu demo</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
  <style>
    .demo {
      text-align: center;
    }
    /* 点击checkbox时，菜单打开或显示 */
    #menu-checkbox:checked ~ .nav {
      display: none;
    }
    /* 隐藏checkbox的复选框 */
    #menu-checkbox {
      display: none;
    }
    .nav ul{
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 20px;
    }
    .glyphicon-menu-hamburger {
      font-size: 30px;
      margin-top: 50px;
    }
  </style>
</head>
<body>  
  <p class="demo">
    <!-- label绑定checkbox -->
    <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label> 
    <input id="menu-checkbox" type="checkbox">
    <p class="nav">
      <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
      </ul>
    </p>
  </p>
</body>
</html>

Wirkung:

Klicken Sie oben auf das Hamburger-Symbol, das Menü wird angezeigt und ausgeblendet .

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vue, um über die ID von der Listenseite zur Detailseite zu springen

So verwenden Sie Slots in der übergeordneten Komponente der Vue Slot-Verteilung

Das obige ist der detaillierte Inhalt vonMenü ohne JS öffnen und schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verwenden Sie Slots in Vue, um übergeordnete Komponenten zu verteilenNächster Artikel：So verwenden Sie Slots in Vue, um übergeordnete Komponenten zu verteilen

In Verbindung stehende Artikel

Mehr sehen