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

Jimdo, Edicion html...

Cmo crear un men 'responsive'

o 'adaptativo'

22
feb

free tutorial jimdo gratis

Cada vez son ms las personas que

utilizan dispositivos mviles como
tablets o smartphones para visitar y
consultar los diferentes sitios web, y
por lo tanto, tenemos que adaptar
nuestra pgina a todo tipo de
dispositivo, ya que no sabemos si nos
va a visitar desde un ordenador, un
mvil o una tablet.

Para que una pgina web sea visible

correctamente en un dispositivo mvil
debe contar con un diseo web
'adaptativo' o lo que se viene a llamar 'responsive', es decir, que se adapta a cualquier tamao de
pantalla, independientemente del tipo de dispositivo que sea.

Aqu les traigo la manera de crear un sencillo men con 'responsive design' utilizando un poco de
HTML, CSS3 y Jquery.

Vista previa

Lo primero y ms importante que tenemos que hacer es incluir la siguiente

etiqueta en el 'Head' de nuestra web.

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1" />

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

Diseo web Jimdo Standard

Ofrece:
Adaptacin de
plantilla
Estilo de
comentarios

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

Bsicamente, lo que hacemos con esta etiqueta es indicar como debe

comportarse el navegador web a la hora de mostrar la pgina web en
pantalla. Podis encontrar una informacin ms detallada acerca de esta
etiqueta aqu.

Bien, lo que vamos a hacer ahora es crear el men en s, algo que

logramos con unas listas y unos enlaces, HTML.
Insertamos el siguiente cdigo en el lugar donde queramos que aparezca
el men con un widget/html.

<nav id="responsive-menu">

<a class="nav-responsive" id="nav-responsive" href="#">

</a>

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Comentarios</a></li>
<li><a href="#">Contacto</a></li>
</ul>

</nav>

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

<style type="text/css">

/* Esto simplemente es para que nuestro nav (responsive-menu) aparezca

a 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;

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

Pginas
individuales (1)
Ayuda e instalaci
Ms +
52$
Diseo web Jimdo
Professional

Ofrece:
Adaptacin de
plantilla
Estilo de
comentarios
Estilo del blog
Pginas
individuales (3)
Ayuda e instalaci
Ms +
78$
Diseo web Jimdo Bussines

Ofrece:
Adaptacin de
plantilla
Estilo de letra
Estilo de blog
Estilo de
comentarios
Pginas
individuales (5)
Optimizacin en
buscadores
Ayuda e instalaci
Edicin Vista mv
Ms +
117$

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

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 el
cursor */
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 que
desplegar 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 el

menu est desplegado */
#nav-responsive.nav-active{
opacity: 1; /* Opacidad */
}

/* A partir de aqu, vista mvil */

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

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

@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 los
elementos <li> */
}

#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 <li> (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 <li> 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 el
cursor */
}

#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 */

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

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

}
}
</style>

Y ahora que ya tenemos el men con estilo, vamos a hacer que el men
se 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.

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(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');
})

});
</script>

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

Comentarios: 2

Escribir comentario

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
http://jdwebdesign.jimdo.com/2014/02/22/cmo-crear-un-men-responsive-o-adaptativo/[25/03/2014 02:04:29 p.m.]

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

Pgina web:
Nombre: *
Entrada: *

Enviar

* Espacios requeridos

Tags
Jimdo
Templates

Contacto
Plantillas
Free

Themes

Diseo

Cdigos

HTML5

Nombre *
Email *
Mensaje *

CSS3
Responsive

enviar

Atencin: Los espacios

marcados con * son
obligatorios. Nunca
enves contraseas a
travs de formularios

Nosotros
Diseo y adaptacin de
pginas web en la
plataforma Jimdo.
Funcionalidad, eficacia,
sencillez y sobre todo
facilidad a la hora de
trabajar con tu pgina web.

Plantillas en HTML5 y CSS3

con diseo 'Responsive' y
tiendas Online con una
sencilla interfaz para el
usuario.

Introduce tu email:

Registrarse

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

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

Aviso legal |

Imprimir | Mapa del sitio

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

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

Iniciar sesin