Buscando información para uno de mis proyectos, en el cual necesitaba crear un menú responsivo, encontré este valiosísimo Plugin JavaScript, que comparto con vosotros.
Se trata de un Plugin que convierte tu menú, en un menú responsivo, adaptable a cualquier dispositivo. Además dispone de varios temas o ejemplos que te ayudarán a crearlo a la derecha, a la izquierda, arriba…
Aquí teneis el ejemplo funcionando: DEMO
Instrucciones
1. Lo primero será linkar los archivos:
<!-- Pon esto en <head> --> <link rel="stylesheet" href="responsive-nav.css"> <script src="responsive-nav.js"></script>
2. Añadir la lista del menú:
<nav class="nav-collapse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
3. El Plugin JavaScript. Recuerda que («.nav-collapse») está llamando a la clase nav-collapse del menú. Si a tu menú le has llamado de otra forma (por ejemplo: .menu), recuerda cambiar ese fragmento («.menu») aquí abajo.
<!-- Coloca este fragmento justo antes del </body> -->
<script>
var nav = responsiveNav(".nav-collapse");
</script>
4. Modifica las Variables
var nav = responsiveNav(".nav-collapse", { // Selector
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 250, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "after", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
openPos: "relative", // String: Position of the opened nav, relative or static
jsClass: "js", // String: 'JS enabled' class which is added to <html> el
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
Según el autor, está testeado y funcionando correctamente en las siguientes plataformas:
iOS 4.2.1+
Android 1.6+
Windows Phone 7.5 & 7.8
Blackberry 7.0+
Blackberry Tablet 2.0+
Kindle 3.3+
Maemo 5.0+
Meego 1.2+
Symbian 3
Symbian Belle
Symbian S40 Asha
webOS 2.0+
Windows XP
Windows 7
Mac OS X
Descargar archivos: DESCARGA MENÚ RESPONSIVO
Ejemplo funcionando: DEMO
