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.
Está buenísimo este menú, lo pondré en mi blog. Saludos.
ResponderEliminarSe feliz a toda costa, de seguro te quedará excelente. Gracias por tu visita. Saludos para ti también.
Eliminaresta bonito. Quizá lo ponga en mi blog.
ResponderEliminarDianichy, que bueno que te gustó. Si lo pones ya me cuentas que tal te quedó. Saludos.
EliminarJames,
ResponderEliminarSoy uno más de los que visita tu blog y mucho aprende. En esta oportunidad quiero pedirte un favor (espero no lo tomes a mal).
Me he bajado una plantilla donde tiene un Menú como gadget pero no doy hecho como activarlo o descubrir donde está armado. ¿puedes hecharme una mano por favor?. Este es mi blog.
Gracias
Quien te lo dijo: Lamento responderte tan tarde. El gadget solo muestra los enlaces del menu; la estructura deberas cambiarla desde dentro de tu plantilla. Por lo general la encuentras si entras en Diseño, plantilla, antes de . Solo cambias alli los enlaces con los que quieras poner y -si todo está bien- resultará como lo quieres. Suerte.
ResponderEliminar