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. Eingabetyp: 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: 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!<input type="checkbox"> Definieren Sie das Kontrollkästchen. <!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
