Академический Документы
Профессиональный Документы
Культура Документы
22
feb
Aqu les traigo la manera de crear un sencillo men con 'responsive design' utilizando un poco de
HTML, CSS3 y Jquery.
Vista previa
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...
<nav id="responsive-menu">
<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">
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 */
}
#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 */
}
Cmo crear un men 'responsive' o 'adaptativo' - Jdwebdesign | Plantillas Jimdo, Webdesign Jimdo, Free templates, Templates Jimdo, SEO Jimdo, Edicion html...
#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) */
}
#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 */
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() {
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
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.
Introduce tu email:
Registrarse
Cmo crear un men 'responsive' o 'adaptativo' - Jdwebdesign | Plantillas Jimdo, Webdesign Jimdo, Free templates, Templates Jimdo, SEO Jimdo, Edicion html...
Aviso legal |
Iniciar sesin