Kommentar: In diesem Artikel wird hauptsächlich die Methode der Verwendung von JQuery zur Implementierung des HTML5 -Reaktionsnavigationsmenüs vorgestellt. Freunde, die es brauchen, können sich darauf beziehen.
Implementiert über JQuery+HTML5, wenn das Browserfenster vom Mobiltelefon eingegrenzt oder zugegriffen wird, wird das Navigationsmenü zum Drop-Down-Menü der Schaltfläche. Reproduktionsbild:
HTML -Code:
<ul>
<li> <a href = "#"> Button </a> </li>
<li> <a href = "#"> Button </a> </li>
</ul>
</nav>
JQuery Code:
Über den folgenden JQuery-Code wird <div id = Menü-ICON> zu <nav id = nav_wrap> hinzugefügt. Wenn Sie auf #Menü-ICON klicken, wird das Menü angezeigt:
<script type = "text/javaScript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script"> "> </script </a >>
<script type = "text/javaScript">
$ (Dokument) .Ready (Funktion ($) {
/ * Menüsymbol vorbereiten *//
$ ('#nave-wrap'). prepend ('<div> Menü </div>');
/ * Wechsel naven */
$ ("#Menü-ICON"). On ("Click", Funktion () {
$ ("#nav"). Slidetoggle ();
$ (this) .ToggleClass ("Active");
});
});
</script>
Das Anzeigen von Elementen über den Browser kann den in der HTML angezeigten Code wie folgt angezeigt werden:
<nav>
<div> Menü </div>
<ul>
<li> <a href = "#"> Button </a> </li>
<li> <a href = "#"> Button </a> </li>
</ul>
</nav>
CSS -Code:
Legen Sie im CSS-Code zunächst das Attribut von #Menü-ICON an: Keine; Im Folgenden ist der Schlüsselcode des CSS -Stils im CSS -Stil zu bestimmen, um den Stil zu bestimmen, wenn die Browserbreite weniger als 600 PX beträgt:
Der endgültige Effekt ist das erste Rendering im Artikel.