2011-09-09 20 views
9

Vorrei fare clic sull'icona (immagine) che visualizzerà il menu a discesa. Ho bisogno solo di un menu semplice senza sottomenu e non voglio usare librerie come jQuery o MooTools.Menu a discesa semplice per javascript

Qualcuno può aiutarmi con questo?

+0

Qual è il motivo per cui si * non * vuole usare jQuery? Sarebbe molto più semplice. –

+2

perché non chiedi a google, prima di scrivere qui – fsonmezay

+2

Non voglio usare jQuery perché è quasi 100kB e non ne ho bisogno per nessun altro motivo. Non mi sembra molto intelligente includere la libreria da 100kB solo a causa del menu. – saric

risposta

18

Basta creare il menu in formato HTML semplice, ma nasconderlo (visualizzazione: nessuno). Quando l'utente fa clic sul pulsante, visualizzalo (imposta "display: block"). Cos'altro devi aggiungere "onmouseout" al menu per farlo scomparire quando l'utente lascia il menu.

Qualcosa di simile

<img src="icon.gif" onclick='showMenu()' /> 
<ul id="menu" style="display:none" onmouseout="hideMenu()"> 
    <li>Menu1</li> 
    <li>Menu2</li> 
</ul> 

<script type="text/javascript"> 
function showMenu(){ 
    document.getElementById("menu").style.display="block"; 
} 
function hideMenu(){ 
    document.getElementById("menu").style.display="none"; 
} 
</script>