Tutorial: Cómo hacer un Menu Responsivo / Responsive

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

Tutorial: Cómo hacer un Menu Responsivo / Responsive

Instrucciones

Según el autor, está testeado y funcionando correctamente en las siguientes plataformas:

Categorías