Tutorial. Cómo Hacer Un Menú Responsivo - Responsive - Tutor PDF

Tutoriales de Diseo Web
Unai Calleja, Diseador Web Freelance.

Men
Tutorial: Cmo hacer un Menu Responsivo /
Responsive
8 noviembre, 2013 Tutoriales de diseo web responsivo, tutorial, tutorial web
Unai Calleja
Buscando informacin para uno de mis proyectos, en el cual necesitaba crear un men
responsivo, encontr este valiossimo Plugin JavaScript, que comparto con vosotros.
Se trata de un Plugin que convierte tu men, en un men responsivo, adaptable a
cualquier dispositivo. Adems dispone de varios temas o ejemplos que te ayudarn a
crearlo a la derecha, a la izquierda, arriba
Aqu teneis el ejemplo funcionando: DEMO
Instrucciones
1. Lo primero ser linkar los archivos:

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>
2. Aadir 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.

<script>
var nav = responsiveNav(".nav-collapse");
</script>
4. Modifica las Variables
Tutorial. Cmo hacer un men responsivo / Responsive - Tutoriales de Diseo Web, Pginas Web, Recursos, CSS, jquery, HTML. | Tutoriales de Diseo Web 24/04/2014
http://unaicalleja.es/blog-diseno-web/tutorial-como-hacer-un-menu-responsivo-responsive/ 1 / 5
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
});
Segn 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
Artculos relacionados
Tweet
Tutorial efecto parallax Scrolling
Tutorial: Cmo hacer un efecto Lupa / Zoom en una imagen
Hacer que un vdeo de Youtube, Vimeo o Google Maps sea responsivo
Tutorial: Mantener fijo el men al hacer Scroll (Parte I)
10 motivos para renovar tu Pgina Web
Tutorial: Cmo migrar un WordPress
Tutorial efecto parallax Scrolling
Share Share Share
Los mejores Sliders Jquery para tu Pgina Web
Nombre *
Correo
electrnico *
Web
Comentario
3 comentarios en Tutorial: Cmo hacer un
Menu Responsivo / Responsive
Deja un comentario
Tu direccin de correo electrnico no ser publicada. Los campos necesarios estn
marcados *
Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym
title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike>
<strong>
Publicar comentario
Pingback: Cmo hacer un men responsivo? | TutorialesWeb.es
Patricio
11 febrero, 2014 a las 9:24 pm
Exelente aporte Funciona perfecto.
En http://latam.motorola.com/ lo estan utilizando.
Responder
Pingback: Tutorial: Flip en jQuery | Tutoriales de Diseo Web
Seguir a @UnaiCallejaFree
Buscar Entradas recientes Categoras
Visita mi Pgina Web
Diseo web: http://www.unaicalleja.es
Google Plus
Bsqueda
Buscar
Categoras
Recursos Diseo Web
Reflexiones
Sin categora
Tutoriales de diseo web
Artculos ms vistos
Tutorial: Cmo hacer un Menu Responsivo / Responsive - 694 veces visto
Tutorial: Mantener fijo el men al hacer Scroll (Parte I) - 582 veces visto
Tutorial: Scroll Suave (Parte II) - 546 veces visto
Los mejores Sliders Jquery para tu Pgina Web - 482 veces visto
Tutorial efecto parallax Scrolling - 460 veces visto
Tutorial: Cmo hacer un efecto Lupa / Zoom en una imagen - 377 veces visto
Hacer que un vdeo de Youtube, Vimeo o Google Maps sea responsivo - 276 veces visto
Qu es WordPress? En qu me puede ayudar? - 195 veces visto
Tutorial: Instalar WordPress paso a paso - 193 veces visto
Tutorial: Cmo migrar un WordPress - 162 veces visto
Artculos Recientes
Incrementar precio segn forma de pago en Woocommerce
Ayudas y Subvenciones 2014 para temas Web
Cmo sacar texto de un archivo flash (.swf)?
Trabajo Freelance como si estuvieras por cuenta ajena
Tutorial: Flip en jQuery
Diseo Web en Bilbao Creado con WordPress
Incrementar precio segn forma de
pago en Woocommerce
Ayudas y Subvenciones 2014 para
temas Web
Cmo sacar texto de un archivo flash
(.swf)?
Trabajo Freelance como si estuvieras
por cuenta ajena
Tutorial: Flip en jQuery
Recursos Diseo Web
Reflexiones
Sin categora
Tutoriales de diseo web
Artculos ms vistos
Tutorial: Cmo hacer un Menu
Responsivo / Responsive - 694 veces
visto
Tutorial: Mantener fijo el men al
hacer Scroll (Parte I) - 582 veces visto
Tutorial: Scroll Suave (Parte II) - 546
veces visto
Los mejores Sliders Jquery para tu
Pgina Web - 482 veces visto
Tutorial efecto parallax Scrolling - 460
veces visto
Tutorial: Cmo hacer un efecto Lupa /
Zoom en una imagen - 377 veces visto
Hacer que un vdeo de Youtube,
Vimeo o Google Maps sea responsivo -
276 veces visto
Qu es WordPress? En qu me
puede ayudar? - 195 veces visto
Tutorial: Instalar WordPress paso a
paso - 193 veces visto
Tutorial: Cmo migrar un WordPress -
162 veces visto
Comentarios recientes
Tutorial: Flip en jQuery | Tutoriales de
Diseo Web en Tutorial: Cmo hacer
un Menu Responsivo / Responsive
Patricio en Tutorial: Cmo hacer un
Menu Responsivo / Responsive
Cmo hacer un men responsivo? |
TutorialesWeb.es en Tutorial: Cmo
hacer un Menu Responsivo /
Responsive
Tutorial: Cmo instalar paso a paso
Wordpress | Tutoriales de Diseo web,
Pginas Web | Tutoriales de Diseo
Web en Tutorial: Cmo migrar un
WordPress
Qu es Wordpress? Informacin
sobre este Gestor de Contenidos -
Tutoriales de Diseo Web, Pginas
Web, Recursos, CSS, jquery, HTML. |
Tutoriales de Diseo Web en Tutorial:
Cmo migrar un WordPress

Tutorial. Cómo Hacer Un Menú Responsivo - Responsive - Tutor PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial. Cómo Hacer Un Menú Responsivo - Responsive - Tutor PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutoriales de Diseo Web

Unai Calleja, Diseador Web Freelance.

Anda mungkin juga menyukai