INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Menu verticale dinamico in Dhtml

Corso Javascript
Impara a creare controlli ed animazioni

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.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Guadagna col tuo sito grazie a TradeD... Riavviare IIS Effetto ombra su testo con Photoshop Guida XHTML Riscrivere le URL con Asp Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Referenze dei Tag Html HTTP 500 internal server error Introduzione ad Ajax ed Asp con Jscri... Breve guida a jQuery Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS
Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf