HTML: ComboBox con stile

Volete fare un menù a tendina che non sia il classico select in html? Oggi ne avevo proprio bisogno e in pochi passi, con un po’ di css e un po’ di javascript, ne ho fatto uno. Sicuramente questa versione non sarà bella da vedere, ma con qualche riga d’aggiunta di CSS e qualche immaginina di sfondo potete veramente fare qualsiasi cosa.

<style>
#mrxCombo{
	position: absolute;
	z-index: 100;
}
#mrxCombo #mrxComboTitle{
	background-color: blue;
	color: white;
	cursor: pointer;
}
#mrxCombo #mrxComboUl{
	padding: 0;
	margin: 0;
	list-style: none;
}
#mrxComboUl li a {
	color: white;
	text-decoration: none;
	background-color: #006699;
	display: block;
}
#mrxComboUl li a:hover{
	background-color: #00CC33;
	}
</style>

<div id="mrxCombo" onmouseover="mrxComboShow(this.id);" onmouseout="mrxComboHide(this.id)">
	<div id="mrxComboTitle">titolo</div>
	<ul id="mrxComboUl">
		<li><a href="#">Scelta 1</a></li>
		<li><a href="#">Scelta 2</a></li>
		<li><a href="#">Scelta 3</a></li>
		<li><a href="#">Scelta 4</a></li>
		<li><a href="#">Scelta 5</a></li>
	</ul>
	</a>
</div>
<script>
function mrxComboShow(id){
	document.getElementById(id + 'Ul').style.display='block';
}
function mrxComboHide(id){
	document.getElementById(id + 'Ul').style.display='none';
}
mrxComboHide('mrxCombo');
</script>

Buona giornata.

Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *