Menú desplegable con color

Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.

[1] Menú desplegable sencillo.

Colocamos este código en un gadget HTMLJavascript:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA

<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>

Y este sería el resultado:

[2] Menú desplegable con opción "Ir".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">
function Ir_amigos(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
</script>
<form name="mis_enlaces">
<select name="dest" class="combobox" SIZE=1>
<option class="amarillo" selected value="">BLOGS AMIGOS
<option class="rojo" value="URL DE LA PAGINA">LINK1
<option class="azul" value="URL DE LA PAGINA">LINK2
<option class="verde" value="URL DE LA PAGINA">LINK3
</select><input type="button" value="Ir" onClick="Ir_amigos(this.form)">
</form>

Y este sería el resultado:

[3] Menú desplegable con enlaces que abren en "página nueva".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">

</script>
<form name="miForma">
<select name="destino" size=1>
<option selected value=""> MIS FAVORITOS
<option value="URL DE LA PAGINA">LINK1
<option value="URL DE LA PAGINA">LINK2
<option value="URL DE LA PAGINA">LINK3
<option value="URL DE LA PAGINA">LINK4
<option value="URL DE LA PAGINA">LINK5
</select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)">
</form>

Y este sería el resultado:

Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.

En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:

.combobox {
background-color: #009900;
color: #ffffff;
}

El resultado sería este:

En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:

.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}

El resultado sería este:

En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:

.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}

Resultado:

ElHackerZ