Hace algunas entradas veíamos un menú horizontal sencillo,
que si bien era útil, resultaba un poco simple (de allí el nombre de sencillo),
pero ahora aquí les traigo un nuevo menú, que, aunque no es nada del otro mundo,
sí les resultará más llamativo que el anterior.
Se trata de un menú que encontré en Gema blog, le hice unos
cambios mínimos (espero que por ello gema no se moleste y me censure),
agregándole mis colores favoritos y efectos básicos de transición para que los
enlaces del menú se agranden al pasar el cursor. Y lo que más me imteresó de
este gadget es que los estilos vienen incluidos dentro del gadget de modo que
resulta más sencillo aún personalizarlo sin tener que tocar otra parte de la
plantilla.
Aquí tienes un ejemplo de lo que digo:
Debido al tamaño del gadget es necesario (no imprescindible,
aunque es lo más lógico), que lo pongas sobre las entradas, pues en el sidebar ocupará
mucho espacio y te quedará en dos filas.
En fin, este es el código:
<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font-size:16px;
}
ul.arrowunderline
li{
display:inline;
margin-right:12px;
}
ul.arrowunderline
li a{
position:relative;
color:orange;
padding-bottom:3px;
text-decoration:none;
}
ul.arrowunderline
li a:hover{
font-weight:bold;
font-style:italic;
font-size:20px;
-moz-transition:
all 1s;
-webkit-transition:
all 1s;
-o-transition:
all 1s;
}
ul.arrowunderline
li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:0px;
bottom: 0;
border-width:0px;
border-style:solid;
border-color:
transparent transparent red transparent;
}
</style>
<ul
class="arrowunderline">
<li><a
href="url-enlace">Inicio</a></li>
<li><a
href="url-enlace">Perfil</a></li>
<li><a
href="url-enlace">Via Rss</a></li>
<li><a
href="url-enlace">Facebook</a></li>
<li><a
href="url-enlace">Twitter</a></li>
<li><a
href="url-enlace">Google+</a></li>
</ul>
Deberás cambiar la url-enlace por la url de cada enlace que
quieras, así para Facebook deberás poner la url de la dirección de tu cuenta de
Facebook, en la Google+ igual, y también la de Twitter; donde dice Font-size:16px;
es el tamaño del texto de los enlaces, puedes cambiarlos por el tamaño que se
acomode a tu blog; en Font-size:20px; es el tamaño que tendrán los enlaces
cuando pongas el cursor allí (debe ser mayor al tamaño normal para que tenga
ese efecto de que se agranda el texto); en color:orange; es el color del texto
(que es mi favorito), puedes ponerle el color que quieras; si quieres que al pasar
el cursor también cambie de color el texto, sólo agrega color:tucolor; (no te olvides el punto y coma) después
de Font-size:20px; y listo.
¿Lo ves? Super sencillo.
