Heim > Artikel > Web-Frontend > Öffnen und schließen Sie Menüs ohne JS

Öffnen und schließen Sie Menüs ohne JS

php中世界最好的语言Original: 2018-05-14 14:20:331090Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zum Öffnen und Schließen des Menüs ohne Verwendung von JS vorstellen. Schauen wir uns unten den tatsächlichen Fall 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:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Artikel, spannender Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung der Verwendung des NodeJS-Protokollmoduls Winston

Detaillierte Erläuterung der zu implementierenden Schritte Vollbild-Bildlauf-Plug-in in ES6

Das obige ist der detaillierte Inhalt vonÖffnen und schließen Sie Menüs ohne JS. 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：Ausführliche Erläuterung der praktischen Schritte zur Wiederverwendung von Inhalten bei der Slot-Verteilung in VueNächster Artikel：Ausführliche Erläuterung der praktischen Schritte zur Wiederverwendung von Inhalten bei der Slot-Verteilung in Vue

In Verbindung stehende Artikel

Mehr sehen