Vamos a crear un menú horizontal dinámico, con submenús. El resultado será una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.
Para ponerlo en nuestro blog: 1.- Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Localizamos la etiqueta ]]></b:skin>, poniéndola dentro del rectángulo de búsqueda (Search), e inmediatamente antes pegamos el siguiente código CSS: #subnavbar {
width: 100%;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
background: #0b3861;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #81bef7;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #0b3861;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #81bef7;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover
ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li
li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
} |
En este código podemos hacer cambios en los colores, para ajustar el menú al diseño de nuestro blog, teniendo en cuenta los resaltados, así: - Amarillo (blanco en la Demo) y azul oscuro: Color del texto, los bordes y el fondo de los elementos activos.
- Negro y azul claro: Color del texto y el fondo de los elementos con el cursor encima.
La línea text-transform: uppercase; transforma todas las letras del menú en mayúsculas. Si queremos evitar eso, la eliminamos. 3.- Vista previa y Guardar plantilla 4.- Vamos a:
Página principal ► Diseño ► Diseño ► Añadir un gadget Html/Javascript (debajo de la cabecera) |
En el gadget añadido pegamos el siguiente código: <div id="subnavbar">
<ul id="subnav">
<li><a href="#"
title="Inicio">INICIO</a>
</li>
<li><a href="#"
title="Texto">MENU 1 </a>
<ul>
<li><a href="#"
title="Texto">SUBMENU 1-1</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 1-2</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 1-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">MENU 2</a>
<ul>
<li><a href="#"
title="Texto">SUBMENU 2-1</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 2-2</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 2-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">MENU 3</a>
<ul>
<li><a href="#"
title="Texto">SUBMENU 3-1</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 3-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">MENU 4</a>
<ul>
<li><a href="#"
title="Texto">SUBMENU 4-1</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 4-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">MENU 5</a>
<ul>
<li =><a href="#"
title="Texto">SUBMENU 5-1</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 5-2</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 5-3</a>
</li>
<li><a href="#"
title="Texto">SUBMENU 5-4</a>
</li>
</ul>
<li><a href="#" title="Texto">CONTACTO</a>
</li>
</li></ul></div> |
En el anterior código reemplazamos: - Todos los signos # por los enlaces correpondientes (URLs de las entradas).
- Todos los Texto por un texto explicativo de la página enlazada, que se verá al poner el cursor sobre cada menú o submenú.
- Todos los MENU y SUBMENU, así como INICIO y CONTACTO, por los textos o títulos de los menús y submenús.
Podemos agregar o quitar elementos siguiendo la lógica secuencia del código y teniendo cuidado de no alterar la estructura del mismo. Nota Se han recibido algunas inquietudes en el sentido de que el menú no se visualiza en su totalidad porque se despliega por detrás del cuerpo de las entradas del blog. Para quienes tengan este problema la solución es la siguiente: - Volvemos a:
Página principal ► Diseño ► Diseño ► |
- Con el cursor arrastramos el gadget que pusimos debajo de la cabecera y que contiene el código del menú, y lo ponemos dentro del cuadro que contiene las entradas del blog, en la parte superior:
... debiendo quedarnos así:  Con esta modificación vamos a tener una pequeña limitación: El menú no podrá ser más ancho que el cuerpo de las entradas del blog. |
