Comentario: Este artículo presenta principalmente el método de usar jQuery para implementar el menú de navegación receptivo HTML5. Los amigos que lo necesitan pueden referirse a él.
Implementado a través de JQuery+HTML5, cuando el teléfono móvil se limita o accede a la ventana del navegador, el menú de navegación se convierte en un menú desplegable de botones. Imagen de reproducción:
Código HTML:
<ul>
<li> <a href = "#"> botón </a> </li>
<li> <a href = "#"> botón </a> </li>
</ul>
</am>
Código jQuery:
A través del siguiente código jQuery, <div id = menú-icon> se agregará a <navy id = nav_wrap>. Cuando haga clic en #menú-icon, se mostrará el menú:
<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">
$ (documento) .Ready (function ($) {
/ * Prepend Menú icono */
$ ('#nav-wrap'). Prepend ('<div> menú </div>');
/ * Toggle Nav */
$ ("#menú-icon"). on ("hacer clic", function () {
$ ("#Nav"). SlidEtoggle ();
$ (this) .TogGlecLass ("activo");
});
});
</script>
Ver elementos a través del navegador puede ver el código que se muestra en el HTML de la siguiente manera:
<Arr>
<div> menú </div>
<ul>
<li> <a href = "#"> botón </a> </li>
<li> <a href = "#"> botón </a> </li>
</ul>
</am>
Código CSS:
En el código CSS, primero configure el atributo de #menú-icon para mostrar: ninguno; luego use la consulta de medios para juzgar la consulta de medios y luego cambiar #menú-icon para mostrar: bloque;. El siguiente es el código clave de estilo CSS para determinar el estilo cuando el ancho del navegador es inferior a 600px:
El efecto final es la primera representación en el artículo.