Menu Horizontal con Efecto Sliding

Menu Horizontal con Efecto Sliding

En esta ocación les traigo un pequeño menu con un efecto sliding, que puede llegar hacer muy vistoso, si lo usamos bien.

Este pequeño menu esta escrito con CSS y HTML, unicamente, nada de Javascript o alguna otra tecnologia.

Bueno pues sin mas ahora vamos a ver el codigo y dar una pequeña descripcion, que no sera muy grande ya que el codigo es muy sencillo de entender.


Codigo CSS:

PLAIN TEXT
CSS:
  1. #menu {
  2.   margin:0;
  3.   padding:0;
  4.   width: 50em;
  5.   height: 4.5em;
  6.   overflow:hidden;
  7.   }
  8. #menu li {
  9.   display:inline;
  10.   list-style-type:none;
  11.   }
  12. #menu li a {
  13.   display:block;
  14.   float:center;
  15.   text-decoration:none;
  16.   margin:0;
  17.   }
  18. #menu li a img {
  19.   opacity:0.7;
  20.   margin:0.5em;
  21.   border:0;
  22.   float:left;
  23.   }
  24. #menu li a span {
  25.   display:none;
  26.   }
  27. #menu li a:hover {
  28.   background:transparent;
  29.   }
  30. #menu li a:hover span {
  31.   width:10em;
  32.   color:#aaa;
  33.   display:block;
  34.   cursor:pointer;
  35.   float:left;
  36.   }
  37. #menu .h2 {
  38.   margin:0 5px;
  39.   padding:0;
  40.   color:#fc0;
  41.   font-variant:small-caps;
  42.   font-size:1.25em;
  43.   border:0;
  44.   }
  45. #Layer1 {
  46.     position:absolute;
  47.     left:339px;
  48.     top:39px;
  49.     width:306px;
  50.     height:259px;
  51.     z-index:1;
  52. }
  53. h1 {
  54.     font: normal 310%/110% Garamond, Georgia, serif;
  55.     letter-spacing: -2px;
  56.     text-transform: uppercase;
  57.     text-align: center;
  58.     padding: 20px 0 0;
  59.     margin: 0;
  60. }
  61. .credits {
  62.     font: 130%/110% Garamond, Georgia, serif;
  63.     text-align: center;
  64.     color: #999;
  65.     width: 300px;
  66.     margin: .5em auto 1.5em;
  67.     padding-top: 8px;
  68.     border-top: 1px solid #ededed;
  69.     letter-spacing: 2px;
  70. }
  71. .credits em {
  72.     color: #999;
  73. }
  74. .credits a {
  75.     color: #333;
  76.     text-decoration: none;
  77.     text-transform: uppercase;
  78. }
  79. .credits a:hover {
  80.     text-decoration: underline;
  81. }
  82.     #Layer2 {
  83.     position:absolute;
  84.     left:83px;
  85.     top:309px;
  86.     width:861px;
  87.     height:172px;
  88.     z-index:2;
  89. }
  90. #Layer3 {
  91.     position:absolute;
  92.     left:315px;
  93.     top:67px;
  94.     width:657px;
  95.     height:86px;
  96.     z-index:3;
  97.     visibility: inherit;
  98. }

Codigo HTML:

PLAIN TEXT
HTML:
  1. <div id="Layer3">
  2.   <ul id="menu">
  3.  
  4.     <li>
  5.   <a href="#"><img src="gmail.png" alt="Gmail" width="62" height="80" title="Mail" />
  6.      <span><br />
  7.       <b class="h2">Gmail</b><br />
  8. devblab[arroba]gmail.com    </span>
  9.     </a>
  10.    </li>
  11.     <li>
  12.   <a href="http://feeds2.feedburner.com/devblab/feed"><img src="rss.png" alt="Feed" width="62" height="80" title="Feed" />
  13.      <span><br />
  14.       <b class="h2">RSS</b><br />
  15. Suscribete a mi Feed </span>
  16.     </a>
  17.    </li>
  18.     <li>
  19.   <a href="http://twitter.com/cuisi"><img src="twitter.png" alt="Twittwe" width="62" height="80" title="Twitter" />
  20.      <span><br />
  21.       <b class="h2">Twitter</b><br />
  22. Sigueme en Twitter    </span>
  23.     </a>
  24.    </li>
  25.  
  26.   <li>
  27.     <a href="#"><img src="delicious.png" alt="Delicious" width="62" height="80" title="Delicious" />
  28.      <span><br />
  29.       <b class="h2">Delicious</b><br />
  30. Agregar a Delicious     </span>
  31.     </a>
  32.    </li>
  33.     <li>
  34.     <a href="#"><img src="digg.png" alt="Digg" width="62" height="80" title="Digg" />
  35.      <span><br />
  36.       <b class="h2">Digg</b><br />
  37. Agragar a Digg     </span>
  38.     </a>
  39.    </li>
  40.        <li>
  41.     <a href="#"><span><br />
  42.       <b class="h2">Digg</b><br />
  43. Agragar a Digg     </span>
  44.     </a>
  45.    </li>
  46.   </ul>
  47. </div>

Bueno pues ese es el codigo, basicamente se trata de jugar un poco con codigo css. Algo que tenemos que tener en cuenta en caso de que el icono sea mas grandes que los de la demo, es, que tendremos que editar la parte de la css donde dice height: 4.5em, ya sea para hacerlo mas grande o mas pequeño


Demo




Descargar Archivos del Tutorial