jquery menù

Jquery Menù (Pillola)

Torno per un Jquery Menù con l’aiuto di Jquery che spesso aiuta nello sviluppo di applicazioni.

Prometto che terminerò prima possibile la guida sull’ area riservata.

Oggi vedremo un ‘Jquery Menù‘ dinamico e molto flessibile. Questo perchè i menù sono una cosa fondamentale di un sito web e soprattutto di un’applicazione web.

Sviluppiamo il menù

Per prima cosa và creata la struttura Html del menù. Andremo ad assegnare una classe principale al tag

    .
<div id="menu">
    <ul id="accordion">
        <li id="main_menu1"><div id="span_menu1">Menù 1</div>
            <ul class="ul_menu1">
                <li id="sub_dati1">
                	<a href="#" id="li_subitem">Dati 1</a>
                </li>
            </ul>
        </li>
        <li id="main_menu2"><div id="span_menu2">Menù 2</div>
            <ul class="ul_menu2">
                <li id="sub_dati2">
                	<a href="#" id="li_subitem">Dati 2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Ora diamo una bella formattazione con il css.

@charset "utf-8";
/* CSS Document */

#menu {
background-color:#38465b;
width:200px;	
}

#menu ul {
list-style:none;
padding:0px;
}

#menu ul.subitem {
padding: 5px 5px 5px 20px;
}

#menu ul li {
padding: 5px 5px 5px 5px;
cursor:pointer;
}

#menu ul a, a:link, a:visited {
color:#999;
font-weight: normal;
text-decoration: none;
}

.active_menu {
background-color:#38465b;
padding:0px;
}

.active {
border-bottom:#273140 solid 1px;
font-weight:bold;
padding-bottom:5px;
width:100%;
}

.active_sub {
font-weight:bold;
background-color:#536786;
}

#main_menu1:hover {
	font-weight:bold;
}

#main_menu2:hover {
	font-weight:bold;
}

#sub_dati1:hover {
background-color:#536786;
}

#sub_dati2:hover {
background-color:#536786;
}

Ora andiamo a vedere il codice Jquery che farà funzionare il tutto:

$(document).ready(function() {

//impostiamo il menù di livello 1 aperto
$('#main_menu1').toggleClass("active_menu");
//impostiamo la classe del menù aperto
$('#span_menu1').toggleClass("active");
//diamo evidenza della voce menù di livello 2
$('#sub_dati1').toggleClass("active_sub");

//andiamo a nascondere tutti i menù di livello 2
$('#accordo ul').hide();
$('#accordion ul.ul_menu2').hide();
//teniamo aperto solo quello attivo
$('#accordion ul.ul_menu1').slideDown(300);

//gestisco il click sul menu 1
$("#accordion > #main_menu1").click(function(){
$("ul",this).slideDown(300);
$('#accordion ul.ul_menu2').slideUp(300);
});

//gestisco il click sul menu 2
$("#accordion > #main_menu2").click(function(){
$("ul",this).slideDown(300);
$('#accordion ul.ul_menu1').slideUp(300);
});

});

Per qualsiasi domanda o errore da parte mia,scrivete nei commenti qui sotto.

Davide Arduini Arduini

Developer Web in Php, Html, Asp, Css. Esperienza in sviluppo di siti web, pannelli gestionali e applicativi aziendali per uso interno. Conoscenza base dei vari CMS (Joomla, WordPress, etc..)

WebSite


Seguimi su: TwitterFacebookLinkedInPinterestGoogle PlusYouTube

Buon anno da Web Developer

Potrebbero interessarti anche

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.