Un menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio. El siguiente es un modelo de código para un menú desplegable, que quedará muy bien en un gadget HTML/JavaScript
<table border="1" width="253px" align="center">
TÍTULO DEL MENÚ , por el que le queramos dar, ejemplo: CONTENIDO, ÍNDICE.Tema # , por los nombres que queramos darles a las divisiones con que hayamos diseñado nuestro blog, ejemplo: Sección #, Capítulo #.URL , por las URLs de las entradas de nuestro blog.Título , por el título de cada una de las entradas al lado de su correspondient URL.
Este menú se ha puesto en una tabla con un ancho de 253 pixeles y con ubicación en el centro. El número de guiones (32) debe ser igual en todos los desplegables para que el menú tenga uniformidad. Los títulos y los temas no deben superar ese ancho.
Para un menú más ancho se deben aumentar el número de pixeles de la tabla y los guiones de los desplegables, y viceversa.
Se puede aumentar, siguiendo los parámetros del modelo, el número de desplegables y dentro de éstos, el número de enlaces.
Así se verá el menú:
TITULO DEL MENÚ
Menú con color personalizado
Para poner color al menú hacemos las siguientes modificaciones al código:
1.- Para ponerle color al fondo agregamos a la primera línea del código la parte resaltada:
<table border="1" width="253px" align="center" bgcolor="#194155" >
Con esto le damos un color al fondo del menú.
2.- Para ponerle color a las celdas cambiamos en cada uno de estos segmentos desplegable combobox
<select class="combobox " onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
3.- Vamos al CSS de nuestra plantilla, localizamos ]]></b:skin>
.combobox { background-color: #0b615e; color: #ffffff; }
Con esto lograremos que las celdas tengan un color (el mismo del fondo), y el texto color blanco.
Así se verá el menú:
TITULO DEL MENÚ
Aquí encontramos una buena herramienta con códigos hexadecimales de colores:
Códigos hexadecimales de colores .
