Commentaire: Cet article présente principalement la méthode d'utilisation de JQuery pour implémenter le menu de navigation réactif HTML5. Les amis qui en ont besoin peuvent y faire référence.
Implémenté via jQuery + HTML5, lorsque la fenêtre du navigateur est rétrécie ou accessible par le téléphone mobile, le menu de navigation devient un menu déroulant de bouton. Image de reproduction:
Code html:
<ul>
<li> <a href = "#"> bouton </a> </li>
<li> <a href = "#"> bouton </a> </li>
</ul>
</ nav>
Code jQuery:
À travers le code jQuery suivant, <div id = menu-icon> sera ajouté à <nav id = nav_wrap>. Lorsque vous cliquez sur # Menu-Icon, le menu sera affiché:
<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">
$ (document) .ready (fonction ($) {
/ * Icône de menu de pré-adhérence * /
$ ('# nav-wrap'). prend ('<div> menu </div>');
/ * Toggle Nav * /
$ ("# menu-icon"). sur ("cliquez", fonction () {
$ ("# nav"). slidetoggle ();
$ (this) .toggleclass ("actif");
});
});
</cript>
La visualisation des éléments via le navigateur peut voir le code affiché dans le HTML comme suit:
<Nav>
<div> Menu </div>
<ul>
<li> <a href = "#"> bouton </a> </li>
<li> <a href = "#"> bouton </a> </li>
</ul>
</ nav>
Code CSS:
Dans le code CSS, définissez d'abord l'attribut de # menu-ICON à afficher: Aucun;, puis utilisez la requête multimédia pour juger la requête multimédia, puis modifiez # Menu-Icon pour afficher: Block;. Ce qui suit est le code de style CSS clé pour déterminer le style lorsque la largeur du navigateur est inférieure à 600px:
L'effet final est le premier rendu de l'article.