Una de las formas más accesibles y cómodas para acceder a los contenidos de cualquier web son los menús de navegación, en todas sus formas.
Los menús desplegables permiten no solo mantener las categorías y subcategorías clasificadas en un espacio compacto y otorgando un aspecto más dinámico.
En este caso explicaremos como colocar en blogger un menú horizontal desplegable hacia abajo como el que se muestra en el siguiente enlace.
Tenemos que tener en cuenta una serie de consideraciones:
- Las limitaciones de Blogger.
- Las limitaciones de otros navegadores.
- Fuentes.
Las limitaciones de Blogger indican que es bastante incómodo, no imposible, crear un navegador que tenga la posibilidad de ser desplegable, por lo que la forma de hacerlo será añadir un gadget de inserción de código HTML/JavaScript.
Para ello entraremos en la opciones del blogger y clicamos en:
"Diseño" -> "Añadir un Gadget" -> HTML/JavaScript.
Lo colocamos en la parte que más nos convenga (en este caso en la zona del navegador, o como nosotros encima de las entradas) y ten cuidado con el ancho de tu plantilla.
Insertamos el siguiente código:
<div id='BloqueNavegador'>
<ul id='ListaMenu'>
<li>
<a href='#'>Inicio</a>
</li>
<li>
<a href='#'>Entrantes</a>
<ul>
<li><a href='#'>Entremeses</a></li>
<li><a href='#' style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;">Tapas</a></li>
</ul>
</li>
<li>
<a href='#'>Principales</a>
<ul>
<li><a href='#'>Carnes</a></li>
<li><a href='#'>Pescados</a></li>
<li><a href='#'>Verduras</a></li>
<li><a href='#'>Cremas</a></li>
<li><a style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;" href='#'>Salsas</a></li>
</ul>
</li>
<li>
<a href='#'>Internacional</a>
</li>
<li>
<a href='#'>Repostería</a>
<ul>
<li><a href='#'>Tartas</a></li>
<li><a style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;" href='#'>Bizcochos</a></li>
</ul>
</li>
<li>
<a href='#'>Bebidas</a>
<ul>
<li><a style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:4px;" href='#'>Cockteles</a></li>
</ul>
</li>
</ul>
</div>
|
Según nuestras necesidades podemos añadir o quitar elementos añadiendo o eliminando las etiquetas <li>...</li> y lo que tengan entre ellas. Se queremos añadir una subcategoría debemos introducir entre los <li> un <ul><li>...</li></ul> o quitarlos si no las queremos.
Hasta ahora el navegador estará incompleto sin su correspondiente CSS.
Para poder insertarlo, debemos ir de nuevo a las opciones del blog y clicar en:
"Plantilla" -> "Editar HTML"
Cuando veamos el código fuente debemos buscar el siguiente texto:
]]></b:skin>
Aquí es donde concluye el CSS de nuestro blog. Para buscar es necesario hacer un clic sobre el código y después presionar Ctrl+F.
Encima del texto que buscamos escribimos lo siguiente:
/*CODIGO METIDO POR MI MISMO COMO CSS, ASÍ DEJAMOS MARCA PARA LA PROXIMA */
#BloqueNavegador {
background: #FFFFFF;width: 720px; margin: 0px; padding: 0 0 0 5px; position: relative; border-radius:10px; height:46px;}
#ListaMenu {
margin: 0; padding: 0; }
#ListaMenu ul {
float: left; list-style: none; margin: 0; padding: 0; }
#ListaMenu li {
list-style: none; margin: 0; padding: 0; height:35px; }
#ListaMenu li a, #ListaMenu li a:link, #ListaMenu li a:visited {
color: #ef7474; display: block; font: 18px 'Crafty Girls', cursive; font-weight:bold; margin: 0; padding: 9px 12px 10px 10px; text-decoration: none; }
#ListaMenu li a:hover, #ListaMenu li a:active {
color: #E21A1A; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 10px; }
#ListaMenu li {
float: left; padding: 0; }
#ListaMenu li ul {
z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; }
#ListaMenu li ul a {
width: 140px; }
#ListaMenu li ul ul {
margin: -25px 0 0 161px; }
#ListaMenu li:hover ul ul, #ListaMenu li:hover ul ul ul, #ListaMenu li.sfhover ul ul, #ListaMenu li.sfhover ul ul ul {
left: -999em; }
#ListaMenu li:hover ul, #ListaMenu li li:hover ul, #ListaMenu li li li:hover ul, #ListaMenu li.sfhover ul, #ListaMenu li li.sfhover ul, #ListaMenu li li li.sfhover ul {
left: auto; }
#ListaMenu li:hover, #ListaMenu li.sfhover {
position: static; }
#ListaMenu li li a, #ListaMenu li li a:link, #ListaMenu li li a:visited {
background: white; width: 120px; color: #ef7474; display: block; font: 16px 'Crafty Girls', cursive; font-weight:bold; margin: 0; padding: 9px 12px 10px 10px; text-decoration: none; z-index:9999; }
#ListaMenu li li a:hover, #ListaMenuli li a:active {
color: #E21A1A; display: block; margin: 0; padding: 9px 12px 10px 10px; text-decoration: none; }
#ListaMenu li a:hover, #ListaMenu li:hover a {
color: #E21A1A; }
|
En este CSS hemos añadido una fuente de Google Fonts, para añadirla debemos ir a la parte más alta del CSS, para ello buscamos:
/* Content
----------------------------------------------- */
Justo debajo colocamos el código CSS que Google nos dice y tendremos nuestra fuente disponible, en nuestro caso:
@import url(http://fonts.googleapis.com/css?family=Crafty+Girls);
Ahora debemos tener en cuenta las limitaciones de los navegadores web como Internet Explorer, Firefox o Chrome.
Cada uno de estos navegadores interpreta los píxeles referidos a los tamaño de letra o ancho de las casillas a su manera, por lo que deberemos adaptarlos lo mejor posible a nuestras necesidades.
Muchas versiones aun soportadas de Internet Explorer no comprenden los bordes redondos, esto es una tarea tediosa de afrontar y que no explicaremos aquí.
Uno de los problemas a los que tendremos que enfrentarnos el llamado "dotted", que son las lineas punteadas que aparecen cuando insertamos gagdet o hacemos alguna que otra implementación.
Para eliminarlos debemos por tercera vez ir al menú de blogger y clicar en:
"Plantilla" -> "Editar HTML"
En este caso lo que debemos buscar es:
/* Widgets
----------------------------------------------- */
Aquí dependiendo de que plantilla uses el punteado aparecerá de diferente manera, por lo que deberemos repasar la zona en busca de expresiones CSS como:
border-bottom:1px dotted $bordercolor;
border-top: dashed 1px rgba(128, 128, 128, .5);
Para eliminar el punteado deberemos poner a 0px los bordes que contengan "dotted" o "dashed", aunque en este segundo caso podemos poner como "0.0" el último de sus parámetros.
Espero haber sido de ayuda a los que lo necesiten y si tenéis dudas preguntad que tan pronto podamos responderemos.
Un cordial saludo.
