Menü ohne JS öffnen und schließen-js-Tutorial-php.cn

Menü ohne JS öffnen und schließen

php中世界最好的语言

Freigeben： 2018-06-01 13:52:54

Original

1678 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!