Pues como dicen en una comunidad sobre CSS que visito menos de lo que debiera, "Hasta no ver la demo es un dragón", así que para hacer realidad la teoría, hoy un sencillo pero resultón menú que deja ver los respectivos iconos programados cuando se pasa el puntero por encima del texto que servirá de enlace. Alguien me pidió algo parecido hace unas semanas, así que helo aquí.
Como la explicación genérica ya iba en el post que enlacé al principio, ahí va directamente el código.
En primer lugar incluimos nuestra lista de enlaces. Eso puede ser en la plantilla o añadido desde la vista Diseño en un nuevo gadget tipo HTML/JavaScript (Blogger), situado por ejemplo encima del cuerpo de las entradas. La única diferencia en el código será que en primer caso (plantilla), las comillas dobles (") habrá que cambiarlas por comillas simples (') para que el código se interprete bien.
<ul class="iconmenu">
<li><a href="ENLACE_1"><span class="fa fa-home"></span>Inicio</a></li>
<li><a href="ENLACE_2"><span class="fa fa-camera"></span>Galería</a></li>
<li><a href="ENLACE_3"><span class="fa fa-beer"></span>Birra</a></li>
<li><a href="ENLACE_4"><span class="fa fa-envelope"></span>Contacto</a></li>
</ul>
<li><a href="ENLACE_1"><span class="fa fa-home"></span>Inicio</a></li>
<li><a href="ENLACE_2"><span class="fa fa-camera"></span>Galería</a></li>
<li><a href="ENLACE_3"><span class="fa fa-beer"></span>Birra</a></li>
<li><a href="ENLACE_4"><span class="fa fa-envelope"></span>Contacto</a></li>
</ul>
Lo que corresponde personalizar aquí será la dirección de destino de los enlaces (ENLACE_X), el texto visible de los mismos (Inicio, Galería, etc.) y los iconos que queremos que aparezcan. Para esto último habrá que buscar en este catálogo el nombre y listo.
Luego, editando la plantilla, cargamos un par de ficheros CSS. Uno para la fuente Awesome y otro con una fuente "normal" que utilizaremos para el texto del menú. He usado la Oswald, pero evidentemente podéis usar cualquiera que os guste más. El catálogo completo de las disponibles en Google Fonts, accediendo al anterior enlace.
El mejor sitio para añadir estas dos líneas sería en el head, pero a mí me ha tragado con este código también en posts e incluso en la parte HTML de la plantilla.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="http://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet" type="text/css">
El último paso será añadir el estilo, responsable como siempre de la "magia". Como seguro que todavía alguien pregunta, en Blogger se inserta o bien entre las etiquetas skin de la plantilla o bien desde el Diseñador de plantillas: Plantilla > Personalizar > Avanzado > Añadir CSS
ul.iconmenu {
margin: 10px auto;
padding: 0;
text-align: center;
font-size: 0;
}
ul.iconmenu li {
position: relative;
display: inline-block;
overflow: hidden;
padding: 20px 10px 5px;
font-family: Oswald, sans-serif;
font-size: 30px;
}
ul.iconmenu li a {
text-decoration: none;
color: orange;
}
ul.iconmenu li a:hover {
color:orangered;
}
ul.iconmenu span.fa {
font-size: 24px;
}
ul.iconmenu li a span {
display: none;
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
}
ul.iconmenu li a:hover span {
display: block;
}
margin: 10px auto;
padding: 0;
text-align: center;
font-size: 0;
}
ul.iconmenu li {
position: relative;
display: inline-block;
overflow: hidden;
padding: 20px 10px 5px;
font-family: Oswald, sans-serif;
font-size: 30px;
}
ul.iconmenu li a {
text-decoration: none;
color: orange;
}
ul.iconmenu li a:hover {
color:orangered;
}
ul.iconmenu span.fa {
font-size: 24px;
}
ul.iconmenu li a span {
display: none;
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
}
ul.iconmenu li a:hover span {
display: block;
}
¿Lo vemos funcionando?
En este Codepen están las dos demos que incluí en esta entrada y allí mismo podéis trastear para hacer vuestras pruebas e ir cambiando valores hasta llegar al estilo que más os guste.
Esta sería por ejemplo una pequeña variación
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola Oloman.
ResponderEliminarLas fonts Awesome te funciona en Chrome y Opera?
Porque en mis testes ha encontrado alguns problemas (no se ve)...
probado en mi blog en los iconos para compartir y tuvo que reemplazar por imágenes para que se mostrarán en todos los navegadores...
Abrazo.
Si, funcionan en todos los navegadores (al menos en los que he testeado la web de mi cliente :P)
EliminarMe hiciste dudar y por eso acabo de probar de nuevo en Chrome, Firefox e IE. En los tres se ven los iconos generados por la fuente. Opera no lo tengo instalado, pero en un iPad (Safari) también se ve.
ResponderEliminarHola Oloman: Funciona para una pagina web?. Lo he intentado pero me sale encima del texto un cuadradito. Estoy haciendo lago mal?
ResponderEliminarsaludos
Codepen no es un blog y allí funciona. Supongo que lo que pasa es que no te carga la fuente bien y que por eso salen caracteres extraños en lugar de iconos. Repasa eso.
Eliminarhola me podrias explicar como hacer para centrar ese menu... he intentado de muchas maneras y aun nada de nada
ResponderEliminarEl CSS que incluí en esta entrada ya lo centra, por lo que no entiendo qué problema puedes tener ¿dónde lo pusiste que lo vea?
EliminarHola! Tengo un problema, al usar el codigo que hay en el CodePen si funciona, pero el problema es que solamente funciona si esos codigos, el Código CSS del Codepen lo pongo como dices en Plantilla > Personalizar > Avanzado > Añadir CSS y el código HTML del Codepen lo pongo en Plantilla > Editar HTML y allí lo pongo antes del head. ¿Como hago para que se vea bien si lo incluyo en un gadget HTML? Si lo incluyo en un gadget HTML, si quito el código que hay delante del head y lo pongo en el gadget HTML, se ve, pero no se ve como en el ejemplo, el tipo de letra no sale, no sale centrado...en fin. Gracias por tu tiempo!
ResponderEliminarPor cierto, si lo hago como he dicho al principio, sale arriba del todo, incluso antes que la cabecera y me gustaría que saliera en un gadget HTML que incluiría después de la cabecera. Gracias!
EliminarLo que seguramente te está pasando es que al ponerlo en el HEAD te coge un estilo por defecto y al ponerlo en un GADGET te coge otro distinto.
EliminarPuedes dejarlo en el gadget, pero si quieres que cambien la fuente y cosas así, entonces deberás después cambiar/añadir cosas en el CSS. Por ejemplo añadiendo un font-family o modificando el existente.
Amigo! hice todo como dijiste, esta todo bien! Excepto que la imagen arriba del texto no aparece.
ResponderEliminarEl texto está perfecto y tiene su estilo, lo único es eso que la imagen no aparece, he intantado por otras imagenes y nada! Que puede ser?
Saludos!
Pues en un principio las "imágenes" (no son tales realmente) deberían salir si añadiste la carga de la fuente Awesome (en el ejemplo está en el trozo que carga también la fuente Oswald), pero también podría ser que te comiste algún punto y coma, alguna llave, etc. Tendría que verlo para averiguar algo.
Eliminarse pueden colocar numeros romanos
ResponderEliminar¿Dónde? ¿Cómo? ¿Preguntas o afirmas?
Eliminar