Menu verticale dinamico in Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

I menu dinamici sono tra le migliori specialità del Dhtml. In questo Articolo vedremo come realizzarne uno verticale (stile Gestione Risorse di Windows) molto semplice, compatibile solo con Ms Internet Explorer, adatto, ad esempio, ad applicazioni intranet in cui il browser di provenienza è sicuro.

Di seguito il codice completo:

<html>
    <head>
        <title>Menu verticale dinamico (solo Ms IE)</title>
        <script language="javascript">
            <!--
                function Menu()
                {
                    var name = document.all[event.srcElement.getAttribute("name", false)];
                    if (name != null)
                    {
                        name.className = name.className == "chiuso" ? "aperto" : "chiuso";
                    }
                }
            //-->
        </script>
        <style type="text/css">
            div { font: Normal 10px Verdana; }
            .aperto { display: Block; }
            .chiuso { display: None; }
            a { color: #778899; }
        </style> 
    </head>
<body>

<div name="menu1" onClick="Menu()" style="font-weight: Bold; cursor: Hand;">Voce principale 1</div>
<div class="chiuso" id="menu1">
    :: <a href="#">Link 1</a><br>
    :: <a href="#">Link 2</a><br>
    :: <a href="#">Link 3</a><br>
</div>
<div name="menu2" onClick="Menu()" style="font-weight: Bold; cursor: Hand;">Voce principale 2</div>
<div class="chiuso" id="menu2">
    :: <a href="#">Link 1</a><br>
    :: <a href="#">Link 2</a><br>
    :: <a href="#">Link 3</a><br>
</div>
<div name="menu3" onClick="Menu()" style="font-weight: Bold; cursor: Hand;">Voce principale 3</div>
<div class="chiuso" id="menu3">
    :: <a href="#">Link 1</a><br>
    :: <a href="#">Link 2</a><br>
    :: <a href="#">Link 3</a><br>
</div> 

</body>
</html>
Lo script residente nell'header della pagina è standard e non necessita di modifiche; fisicamente il menu dell'esempio è costituito da 3 item: vediamo il codice necessario all'aggiunta di una quarta voce
<div name="menu4" onClick="Menu()" style="font-weight: Bold; cursor: Hand;">Voce principale 4</div>
<div class="chiuso" id="menu4">
    :: <a href="#">Link 1</a><br>
    :: <a href="#">Link 2</a><br>
    :: <a href="#">Link 3</a><br>
</div> 
Le porzioni evidenziate in grassetto sono le uniche da modificare.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD