Cómo Crear Un Menú 'Responsive' o 'Adaptativo' - Jdwebdesign _ Plantillas Jimdo,

Cmo crear un men 'responsive' o 'adaptativo' - Jdwebdesign | Plantillas Jimdo, Webdesign Jimdo, Free templates, Templates Jimdo, SEO Jimdo, Edicion html...

http://jdwebdesign.jimdo.com/2014/02/22/cmo-crear-un-men-responsive-o-adaptativo/[25/03/2014 02:04:29 p.m.]

Lo primero y ms importante que tenemos que hacer es incluir la siguienteetiqueta en el 'Head' de nuestra web.

Vista previa

22febCmo crear un men 'responsive'

o 'adaptativo' free tutorial jimdo gratis

Cada vez son ms las personas queutilizan dispositivos mviles comotablets o smartphones para visitar yconsultar los diferentes sitios web, ypor lo tanto, tenemos que adaptarnuestra pgina a todo tipo dedispositivo, ya que no sabemos si nosva a visitar desde un ordenador, unmvil o una tablet. Para que una pgina web sea visiblecorrectamente en un dispositivo mvildebe contar con un diseo web

'adaptativo' o lo que se viene a llamar 'responsive', es decir, que se adapta a cualquier tamao depantalla, independientemente del tipo de dispositivo que sea. Aqu les traigo la manera de crear un sencillo men con 'responsive design' utilizando un poco deHTML, CSS3 y Jquery.

Diseo web Jimdo Standard

Ofrece:

Adaptacin deplantilla

Estilo decomentarios



Bsicamente, lo que hacemos con esta etiqueta es indicar como debecomportarse el navegador web a la hora de mostrar la pgina web enpantalla. Podis encontrar una informacin ms detallada acerca de estaetiqueta aqu. Bien, lo que vamos a hacer ahora es crear el men en s, algo quelogramos con unas listas y unos enlaces, HTML.Insertamos el siguiente cdigo en el lugar donde queramos que aparezcael men con un widget/html.

Inicio Portafolio Blog Comentarios Contacto

Una vez que ya tenemos el men, vamos a darle forma y estilo con algode CSS y CSS3. Insertamos el siguiente cdigo en el 'Head' de nuestraweb.Cada etiqueta est explciada para que sepais que es y para que funciona.

/* Esto simplemente es para que nuestro nav (responsive-menu) aparezcaa la izquierda (left) */#responsive-menu{float: left;background: #1C1F23; /* Color de fondo del men */width: 100%; /* Ancho */} /* Quitamos estilos predeterminados de la etiqueta UL (margen, relleno,estilo de lista y tamao de letra) */#responsive-menu ul{margin: 0;padding: 0;list-style: none;

Pginasindividuales (1)

Ayuda e instalaci Ms +

52$

Diseo web Jimdo

Professional

Ofrece:


Estilo decomentarios

Estilo del blog Pginas

individuales (3) Ayuda e instalaci Ms +

78$

Diseo web Jimdo Bussines

Ofrece:


Estilo de letra Estilo de blog Estilo de

comentarios Pginas

individuales (5) Optimizacin en

buscadores Ayuda e instalaci Edicin Vista mv Ms +

117$



font-size: 14px; } #responsive-menu li{display: inline;float: left; /* Flotado a la izquierda */text-transform: uppercase; /* Transformamos el texto a maysculas */text-align: center; /* Texto centrado */} /* Aadimos estilo a los enlaces */#responsive-menu li a{display: block; color: #fff; /* Color de letra */text-decoration: none; /* Sin subrayado */line-height: 60px;padding: 0 26px; /* Relleno */} #responsive-menu li a:hover{background: #151a1e; /* Color de fondo de cada elemento al pasar elcursor */color: #ffc700; /* Color de letra al pasar el cursor */} #nav-responsive{display: none; /* Ocultamos el enlace */background: url(desplegar.png) no-repeat 15px 17px; /* Imagen quedesplegar el men al hacer click */text-decoration: none; /* Sin subrayado */float: right; /* Flotado a la derecha */width: 60px; /* Ancho */height: 60px; /* Alto */position: absolute;right: 0; /* Derecha */top: 0; /* Arriba */opacity: .6; /* Opacidad */ } /* Agregaremos la clase .nav-active al enlace #nav-responsive, cuando elmenu est desplegado */#nav-responsive.nav-active{opacity: 1; /* Opacidad */} /* A partir de aqu, vista mvil */



@media only screen and (max-width: 768px) { /* Mostramos el enlace que desplegar el men (#nav-responsive) */#nav-responsive{display: block;} #responsive-menu{width: 100%; /* Ancho (vista mvil) */float: none; /* Dejamos de flotar el men ya que el ancho es 100% */padding-top: 60px; /*Relleno por arriba a partir del cual se mostrarn loselementos */} #responsive-menu ul{box-shadow: 0 1px 2px rgba(0,0,0,.5); /* Sombra al men */max-height: 0;overflow: hidden;}/* Aadimos estilo a cada elemento (Vista mvil) */#responsive-menu li{background: #33363b; /* Color de fondo */border-bottom: 1px solid #282b30; /* Borde inferior tamao-tipo-color */float: none;display: block;}#responsive-menu li:last-child{border-bottom: 0; /* Quitamos el borde al tlimo elemento del men(Vista mvil) */} /* Estilos para los enlaces (Vista mvil) */#responsive-menu li a{padding: 15px 0;height: auto;line-height: normal;} #responsive-menu li a:hover{background:#2a2d33; /* Color de fondo para cada enlace al pasar elcursor */} #responsive-menu ul.open-responsive-menu{max-height: 400px; /* Mximo alto para el men desplegado */transition: max-height .5s; /* Efecto en el despliegue del men */



}}

Y ahora que ya tenemos el men con estilo, vamos a hacer que el mense despliegue y se contraiga al hacer clic sobre el enlace de la vista mvil.Esto lo conseguimos con unas lneas de jQuery que insertamos en el'Head' de nuestra web.

$(function() { var enlace_movil = $('#nav-responsive'), menu = $('#responsive-menu').find('ul'); enlace_movil.on('click', function (e) { e.preventDefault(); var esto = $(this); esto.toggleClass('nav-active'); menu.toggleClass('open-responsive-menu'); }) });

Bueno, esto ha sido todo. Ha sido un tutorial bastante largo, pero creo quepodreis entenderlo, espero que os guste.

Escribir comentarioComentarios: 2

TONI(domingo, 23 febrero 2014 18:14)COMO SIEMPRE,EXTRAORDINARIO.UN ABRAZO,DANI.

#1

jdwebdesign(mircoles, 26 febrero 2014 19:29)Hola toni,Muchas gracias por el comentario, me alegro de que te guste.Un saludo

#2

#3



TagsJimdo Plantillas

Templates Free

Themes Diseo

Cdigos HTML5

CSS3

Responsive

ContactoNombre *

Email *

Mensaje *

Atencin: Los espaciosmarcados con * sonobligatorios. Nuncaenves contraseas atravs de formularios

NosotrosDiseo y adaptacin depginas web en laplataforma Jimdo.Funcionalidad, eficacia,sencillez y sobre todofacilidad a la hora detrabajar con tu pgina web. Plantillas en HTML5 y CSS3con diseo 'Responsive' ytiendas Online con unasencilla interfaz para elusuario.

Introduce tu email:

Pgina web:

Nombre: *

Entrada: *

* Espacios requeridos



Aviso legal | Imprimir | Mapa del sitio Iniciar sesin

Te gusta esta pgina web? Crea la tuya propia en www.jimdo.es.

jimdo.comCmo crear un men 'responsive' o 'adaptativo' - Jdwebdesign | Plantillas Jimdo, Webdesign Jimdo, Free templates, Templates Jimdo, SEO Jimdo, Edicion html Jimdo, Solucion conflictos Jquery Jimdo, Diseo web Jimdo.

9uc2l2ZS1vLWFkYXB0YXRpdm8vAA==: form1: me220d45f72c93c890: me220d45f72c93c891: me220d45f72c93c892: input1: submit:

9uc2l2ZS1vLWFkYXB0YXRpdm8vAA==: form3: email: input11:

9uc2l2ZS1vLWFkYXB0YXRpdm8vAA==: form0: url: name: comment: Enviar:

Cómo Crear Un Menú 'Responsive' o 'Adaptativo' - Jdwebdesign _ Plantillas Jimdo,

Documents

Transcript of Cómo Crear Un Menú 'Responsive' o 'Adaptativo' - Jdwebdesign _ Plantillas Jimdo,