Hace unos días que estaba con la idea de crear mi primer tutorial en Cristalab, y ahora que tengo tiempo libre me tomé unas horitas en lograr este resultado. En este pequeño tutorial crearemos un menú de navegación a partir de una lista desordenada <ul>, y con la magia de CSS3 obtendremos un menú como este:
Para empezar creamos nuestro archivo index.html que debe quedar así:
Código :
<html> <head> <meta charset="utf-8"> <title>Tutorial - Menu de Navegación</title> <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="estilos.css"> </head> <body> <div class="contenedor"> <ul class="menu"> <li> <h2>Inicio</h2> <p>Bienvenido</p> </li> <li> <h2>Mi perfil</h2> <p>Algo más de mi</p> </li> <li> <h2>Portafolio</h2> <p>Mis trabajos</p> </li> <li> <h2>Contacto</h2> <p>Déjame un mensaje</p> </li> </ul> <hr> </div> </body> </html>
Como verán en el <head> hay un <link> que hace referencia a las Google Web Fonts, específicamente a la fuente con nombre "Aldrich" la cual utilizaremos en este tutorial.
Por otro lado tenemos que agregar lo siguiente en nuestra hoja de estilos:
Código :
* {margin: 0; padding: 0;}
body {
background: #1E6381;
font-family: 'Aldrich', sans-serif;
}
.contenedor{
width: 960px;
margin: auto;
}
Con esta línea de código * {margin: 0; padding: 0;} estamos creando un pequeño reset que hará que todos los elementos html tengan 0 de margin y 0 de padding. En el body vamos a definir el color de fondo y el tipo de fuente. En el contenedor indicamos el ancho y margin: auto; para que esté centrado.
Código :
.menu {
margin: 50px 110px;
background: #fff;
width: 740px;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
}
.menu li {
width: 160px;
border-left: 5px solid #999;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.menu li h2 {
font-weight: normal;
font-size: 18px;
}
.menu li p{
font-size: 14px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
Ahora si pasamos al diseño del menú, que en este caso es la lista desordenada que pertenece a la clase "menu" vamos a indicar el margen, color de fondo, el ancho y una pequeña sombra.
Para el elemento "li" de la lista estamos agregando border-left: 5px solid #999; que crea un borde al lado izquierdo de 5px de grosor y un color #999.
Luego indicamos tamaño de fuente y color para "h2" y "p".
transition: all 0.1s ease-in es un efecto que permite hacer que un elemento cambie poco a poco de un estilo a otro.
Por último vamos a cambiar los estilos de los elementos del menú una vez que el cursor esté encima de éstos. El código es sencillo, sólo define color de fondo, color de texto, y en el caso de "p" añade un pequeño padding a la izquierda.
Código :
.menu li:hover {
background: #000;
border-left: 5px solid #FFC661;
}
.menu li:hover h2 {
color: #fff;
}
.menu li:hover p {
color: #ccc;
padding-left: 10px;
}
Con esto ya tendríamos el menú listo!
Demo
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Zeneke el 24 de Septiembre de 2012
Por alepanta el 24 de Septiembre de 2012
Zeneke-blog :
Gracias por la recomendación, en realidad si tienes razón en cuanto a los colores, lo tomare en cuenta para el próximo tutorial. Y así ir mejorando!
Por otro lado, como lo realizaste en la actualidad (2012), tú código es mejor procesado por los navegadores.
antonionavajas :
Exactamente, pero por alguna razón a los usuarios les cuesta mucho hilar una idea y escribirla bien. Quizás es porque cada vez escriben menos y quizás se lee menos en general.
Por Cprado el 26 de Septiembre de 2012
Por Alejo Aya el 28 de Septiembre de 2012