Menú con animación CSS y descripción para Blogger

En el día de hoy veremos cómo añadir un grandioso menú con transiciones logradas con CSS para Blogger, además de las transiciones destaca que se pueden poner breves descripciones en los enlaces, el estilo predefinido del menú se adapta muy bien en blogs de colores oscuros, aunque con editar un poco la hoja de estilo (CSS) puedes adaptarlo según tus requerimientos.

Menú con animación CSS y descripción para Blogger
Menú con animación CSS y descripción para Blogger


Para añadir este menú en tu blog, ve a Diseño y en un gadget HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:

<style>
#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}
#menu-soft ul {
width:940px;
margin:0auto;
}
#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}

#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}

#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}

#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}

#menu-soft li span {
font-size:24px;
}
</style>

<div id="menu-soft">
<ul>
<li id="enlace-1"><a href="URL 1"><span>Enlace 1</span><br>Descripción 1</br></a></li>
<li id="enlace-2"><a href="URL 2"><span>Enlace 2</span><br>Descripción 2</br></a></li>
<li id="enlace-3"><a href="URL 3"><span>Enlace 3</span><br>Descripción 3</br></a></li>
<li id="enlace-4"><a href="URL 4"><span>Enlace 4</span><br>Descripción 4</br></a></li>
</ul>
</div>

Lo resaltado en negrita es la parte del HTML en la que se agregan los enlaces, los títulos de esos enlaces y la descripción que se mostrarán en el menú, ahora solo guarda los cambios. Lo qué está encerrado en las etiquetas <style> </style> corresponde al css, desde allí puedes editar la apariencia general del menú.

Entradas que pueden interesarte

disqus