|
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. Veámoslo:
Para ponerlo en nuestro blog:
1.- Vamos a Edición de HTML:
Página principal ► Diseño ► Edición de HTML
2.- Localizamos ]]></b:skin> 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.
3.- Vista previa y Guardar plantilla
4.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget 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 Elementos de página.
- 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.
|
16 comentarios:
oye gracias...
pero sabes si este codigo hara lo que tengo pensado...
ya he provado varios codigos en mi blog pero me sigue saliendo este problema:
el submenu sale devajo de una linea que esta encima de una entrada y tambien aparece debajo del texto de esa entrada y no puedo acceder a ese submenu...este es miblog:
http://softwareandvideos.blogspot.com/2011/02/uno-mas-del-monton.html
Hola CASTORLUX. Muy bueno e instructivo tu blog. He puesto este menú horizontal dinámico en mi blog pero no encontré la forma de que apareciese el color de fondo azul. Probé de todas las maneras posibles pero la plantilla tiene una opción de edición "fondo de pestaña" donde le pude poner un color que lamentablemente no sale homogéneo. Otro problema es que los submenúes quedaban ocultados por la publicidad de AdSense, por lo que tuve que suprimirlos. Si tienes tiempo te agradeceré alguna manera de solucionarlo. Saludos.
MNOM: Debes tener algún error. Fíjate bien si has aplicado exactamente lo explicado en el tutorial. Este menú ha sido probado con varios navegadores y en todos funciona bien. Es posible también que algún cambio que hayas hecho en la plantilla sea la causa del problema.
Saludos.
Alberto: Sigue cuidadosamente las indicaciones del tutorial, sin modificar ninguna parte de la plantilla que no se mencione en el mismo. Dime qué plantilla usas.
Saludos.
Estoy usando una plantilla con el diseñador de plantillas, y si arrastro el menu debajo de la cabecera, los submenus se despliegan, pero no deja solucionarlos. Haber si me puedes ayudar. Muchas gracias.
perdona, el blog es el de pruebas: http://probapontenova.blogspot.com/
Pontenova.es: Mirando tu blog de pruebas veo que el menú está funcionando tal como está en el tutorial. La primera vez, al hacer modificaciones, seguramente cometiste un error. Lógicamente se pueden hacer modificiones en los colores, en las dimensiones, o en el número de submenús, pero teniendo cuidado de no alterar los códigos en su estructura.
Saludos.
Pentonova: Fíjate en MENU 1 aparecen dos cierres de etiqueta (>>) que debiste poner de más en el código.
En el menu 1, no es un cierre, es para indicar al internauta que ese menu es desplegable, por eso funciona igual.Para hacrlo funcionar en la nueva plantilla de blogger con el diseñador de plantillas tuve que eliminar toda la parte del codigo correspondiente a:
/* Tabs
Ahora va bien, pero si hago cualquier modificacion, por pequeña que sea, el menu que teoricamente esta debajo de la cabecera ( que ahora no existe) no muestra los submenus, en cambio si esta colocado en cualquier otra parte si. Es una cosa rara, que seguire investigando. Al cambiar el tamaño de la letra de 11px a otro cualquiera, deja de funcionar el que esta debajo de la cabecera, pero si funciona si esta en otro lado. Un saludo y gracias por tu trabajo.
Hola Castorlux, he conseguido poner el indice pero el submenu no flota encima de la entrada y por lo tanto no se ven las pestañas del submenu...
puedes ver el codigo fuente de mi blog y ver la entrada que me falta? lo he intentado mil veces y nada!
http://loftbcnarquitecturainterior.blogspot.com/
Muchas gracias!
hola castorlux... ami tabien me pasa lo mismo el submenu caundo se despliega las ultimas opciones quedan debajo de el contenido del blog y no s epuede entrar a ellas... pero esto solo me pasa en internet explorer 8.... en los demas navegadores si.. pero has d eencontrar una solucion por que ya sabras que este es el navegador mas usado... y si hay no funciona pues este menu no tendria mucha utilidad por que todos los usuarios no lo podrian navegar correctamente
Hola Zerolimit: Vuelve al tutorial. En la parte final del mismo puse una nota que resuelve tu inquietud y la de otros usuarios.
Saludos.
Muchísimas gracias, ¡por fin encontré a alguien que lo que pone funciona en el bloggs de un inexperto!
La barra de menu me ha venido como un anillo al dedo.
Ahora me hace falta una nube de etiquetas, así que miraré a ver si tiene algo que lo pueda incorporar.
Gracias de nuevo
Mi blogg
Acubens: Gracias por tu comentario.
Para incorporar una nube de etiquetas vas a Diseño ► Elementos de página y añades el gadget correspondiente a Etiquetas. Para escoger la forma de mostrar las etiquetas están las opciones Lista y Nube, marcas Nube y guardas.
Saludos.
¡Gracias Pablo!
Ya lo había puesto en otra ocasión, lo que ocurre es que no termina de gustarme porque me gustaría ponerla de colores o en 3D, he victo alguna muy bonita pero no me ha terminado de funcionar.
Seguiré pendiente por si algún día creas algo en ese sentido.
Recibe un cordial saludo,
Acubens
Publicar un comentario en la entrada