Tutorial: Crear un Menu como el de Twitter

Hola buen día, a continuación les comparto un pequeño tutorial para hacer un menú tipo twitter. Es un sencillo HTML que junto a CSS queda muy bien, para que lo apliques a algún proyecto 
Este sera el resultado del menú al finalizar este tutorial: 


Empezando creamos un HTML al que le puse de nombre "index.html" 
código:  


<!DOCTYPE html> 
      <html> 
      <head> 
          <title>Tutorial</title> 
     <link rel="stylesheet" type="text/css" href="estilo.css">
       </head> 
           <body> 
                       <div id="menu"> 
                              <ul> 
                                     <li><a href="#">Inicio</a></li> 
                                     <li><a href="#">Conecta</a></li> 
                                     <li><a href="#">Descubre</a></li> 
                                      <li><a href="">Cuenta</a></li> 
                               </ul> 
                        </div> 
         </body> 
</html>


A continuación se tiene que crear el archivo CSS, este se puede agregar en el mismo HTML o como archivo independiente, lo mas recomendable es este ultimo. 

Ejemplo de como se manda a llamar al código  CSS mediante la etiqueta <link> donde en href="Nombre_CSS.css" se manda a llamar al código 


A continuación se crea el archivo CSS, al que le puse de nombre "estilo.css" 

body{ 
background-color: #2CB9AB; 
font-family: Helvetica, Arial; 
font-size: 14px; 
margin: 0; 
padding: 0; 

#menu{ 
background-color: #fff; 
height: 41px; 
overflow: hidden; 
padding-left: 100px; 

#menu ul{ 
padding: 0; 
margin: 0; 

#menu ul li{ 
border-bottom: solid 10px green; 
display: inline-block; 
list-style: none; 
padding: 10px 0 20px 0; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
transition: all 0.3s; 

#menu ul li:hover{ 
padding: 10px 0 10px 0; 

#menu ul li a{ 
color: black; 
padding: 10px 25px; 
text-decoration: none; 

La idea en el CSS es tener en cuenta que la capa que contiene todo el menú debe ocultar el overflow, de tal manera que teniendo una altura fija sea posible ocultar lo que tengamos abajo. Cada elemento tiene un borde inferior y se oculta por medio del padding, entonces para simular el efecto lo único que tenemos que hacer es tener un padding inferior al inicio, para que cuando el mouse esté sobre el elemento disminuyamos el padding y con eso se cree el efecto. 

Con esto termina el tutorial, como ven solo son dos sencillos archivos, pero con un resultado muy bonito. Saludos
Tutorial: Crear un Menu como el de Twitter
5 Puntos Score: 5/10
Visitas: 930 Favoritos: 5
Ver los usuarios que votaron...
2 Comentarios Tutorial: Crear un Menu como el de Twitter
Esta bueno!!!, si subieras mas material como este!!  
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!