Menu desplegable con CSS3

el
Menu desplegable con CSS3 para Blogger.
Este es un menu el cual incluye animacion al desplegarse el menu, tiene un estilo muy moderno de HTML5 y es facil de intalar.

Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger

Sigue los siguientes pasos para instalarlo.
  • Ve a Plantilla, luego ve a Edicion de HTML.
  • Busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.
.menu-a,
.menu-a ul,
.menu-a li,
.menu-a a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Menu */
.menu-a {   
    height: 40px; /* alto del menu */
    width: 100%; /* ancho del menu */
    background: #4c4e5a; /* fondo del menu junto con lo que sigue */
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    -webkit-border-radius: 5px; /* radio del borde del menu opera, Chrome */
    -moz-border-radius: 5px; /* radio del borde del menu Firefox */
    border-radius: 5px; /* radio del borde del menu IE9, etc*/
}
.menu-a li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.menu-a li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942; /* borde izquierdo */
    border-right: 1px solid #4f5058; /* borde derecho */
    font-family: Helvetica, Arial, sans-serif; /* fuente de texto del menu */
    font-weight: bold;
    font-size: 13px; /* tamaño de texto */
    color: #f3f3f3; /* color del enlace */
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.menu-a li:first-child a { border-left: none; }
.menu-a li:last-child a{ border-right: none; }
.menu-a li:hover > a { color: #8fde62; /* color del enlace al pasar el cursor */}

.menu-a ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #1f2024; /* fondo del submenu */
    -webkit-border-radius: 0 0 5px 5px; /* radio del submenu opera, chrome */
    -moz-border-radius: 0 0 5px 5px; /* radio del submenu firefox */
    border-radius: 0 0 5px 5px; /* radio del submenu IE9, etc*/
    -webkit-transition: opacity .25s ease .1s; /* opacidad opera, chrome */
    -moz-transition: opacity .25s ease .1s; /* opacidad firefox */
    -o-transition: opacity .25s ease .1s; /* opacidad */
    -ms-transition: opacity .25s ease .1s; /* opacidad */
    transition: opacity .25s ease .1s; /* opacidad */
}

.menu-a li:hover > ul { opacity: 1; }
.menu-a ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.menu-a li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
.menu-a ul li a {
    width: 150px; /* ancho de la subpestaña */
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539; /* ancho y color del borde de abajo del submenu */
}

.menu-a ul li:last-child a { border: none; }

.menu-a a.documents { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/docs.png) no-repeat 6px center; }
.menu-a a.messages { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/bubble.png) no-repeat 6px center; }
.menu-a a.signout { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/arrow.png) no-repeat 6px center; }
  • y guardas los cambios.
  • Luego ve a Diseño y agrega un nuevo gadget HTML/Javascript.
  • y agrega lo siguiente.
<ul class="menu-a">
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#" class=" ">Subpestaña 3.1</a></li>
<li><a href="#" class=" ">Subpestaña 3.2</a></li>
<li><a href="#" class=" ">Subpestaña 3.3</a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a></li>
</ul>
  • Lo de azul es donde se pondrá la URL de la pestaña.
  • Lo de rojo es donde pondrás el nombre de la pestaña.
  • lo de rojo oscuro son los nombres de las subpestañas.
  • Si quieres añadir otra pestaña solo agrega lo siguiente antes de </ul>.
 <li><a href="#">Pestaña</a></li>
  • Si quieres añadirle subpestañas a la pestaña, pasa </li> hacia abajo y encima de </li> pegas lo siguiente.
<li><a href="#">Pestaña</a>
<ul>
<li><a href="#" class=" ">Subpestaña</a></li>
</ul>
</li>
  • Si quieres agregar una pestaña con subpestañas agrega lo siguiente antes de </ul>.
<li><a href="#">Pestaña</a>
<ul>
<li><a href="#" class=" ">Subpestaña</a></li>
<li><a href="#" class=" ">Subpestaña</a></li>
<li><a href="#" class=" ">Subpestaña</a></li>
</ul>
</li>
  • Si quieres añadir otra subpestaña a la pestaña solo agrega lo siguiente antes de </ul>.
 <li><a href="#" class=" ">Subpestaña</a></li>
  • donde se ve class="" es para poner un pequeña imagen. ejemplo.
 class="documents" =http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/docs.png
 class="messages" = http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/bubble.png
 class="signout" = http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/arrow.png 
  • Eso es todo ya tendran un fabuloso menu desplegable con animacion en su blog.

Tipo: CSS3
Licencia: License Free (credito)
Sitio Web: Designmodo.com
Sitio Web: Valeriu Timbuc (web amiga)
Sitio Web: vladimirkudinov.com (web amiga)
enlaces de Valeriu Timbuc
Twitter: @vtimbuc