Comunidad de diseño web y desarrollo en internet online

Menú de navegación con CSS3

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! :cool:

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate