Innanzitutto ciao a tutti e grazie a chi mi risponderà
Sicuramente avrò sbagliato sezione, quindi accetto ogni critica
Ho un problema costruendomi da solo (odio usare codice altrui senza conoscerlo) un drop down menu (non è puro css perchè necessito dell'evento click disponibile solo con jquery (altrimenti su smartphone non posso usarlo))
Necessiterei di un terzo livello
Il codice (html, css, jquery) è il seguente. Dove sbaglio?
codice:<html> <head> <title>Prova DropDownMenu</title> <link rel="stylesheet" href="stile.css" type="text/css"/> <script src="jquery/jquery-2.0.3.js"></script> <script src="jquery.js"></script> </head> <body> <script> </script> <div class="menutendina"> <ul class="liv1"> <li> <a href="#">Home</a> </li> <li> <a href="#sub">Crea</a> <ul class="liv2"> <li> <a href="#">Contatto</a> <ul class="liv3"> <li> <a href="#">Singolo</a> </li> <li> <a href="#">Multiplo</a> </li> </ul> </li> <li> <a href="#">Affare</a> </li> </ul> </li> <li> <a href="#sub1">Visualizza</a> <ul class="liv2"> <li> <a href="#">Clienti</a> </li> <li> <a href="#">Contratti</a> </li> </ul> </li> <li> <a href="#">Esci</a> </li> </ul> </div> </body> </html>codice:div.menutendina{ color: white; } /* *Elenco puntato (livello uno) orizzontale (float:left) */ ul.liv1 { list-style: none; padding: 0; float:left; } /* *Punti dell'elenco puntato (livello uno) orizzontale (float:left) */ ul.liv1 li { list-style: none; padding: 0; float: left; } /* *Elenco puntato (livello due) verticale (float:center) e nascosto (display:none) */ ul.liv2 { list-style: none; display:none; float:center; } /* *Punti dell'elenco puntato (livello due) verticale (float:center) e nascosto (display:none) */ ul.liv2 li { list-style: none; padding: 0; float:center; } /* *Elenco puntato (livello tre) orizzontale (float:left) e nascosto (display:none) */ ul.liv3 { list-style: none; display:none; padding: 0; float:left; } /* *Punti dell'elenco puntato (livello tre) orizzontale (float:left) e nascosto (display:none) */ ul.liv3 li { list-style: none; padding: 0; float:left; } /*---------------------------------INIZIO SEZIONE CRITICA-------------------------------------- LE DUE CLASSI SEGUENTI SONO USATE PER IL MENU A DISCESA (DROPDOWN) Quando un punto del livello n che contiene un elenco di livello n+1 viene premuto (evento jquery click) viene commutata la loro classe CSS:; l'elenco di livello n+1 desiderato diventa visibile (.visible) (display:list-item) (position:absolute); mentre gli altri eventuali elenchi di livello n+1 aperti precedentemente diventano invisible (.invisible) (display:none) -----------------------------------------------------------------------------------------------*/ ul.visible { display: list-item; position: absolute; padding: 0; } ul.invisible { list-style: none; padding: 0; display:none; } /*---------------------------------FINE SEZIONE CRITICA--------------------------------------*/codice:$(document).ready(function(){ $('li').click(function() { /* *Per evitare che ci siano più menu di livello2 aperti contemporaneamente *rimuovo la classe CSS .visible ai (al) menu aperti e la sostituisco con .invisible */ $('.visible').removeClass('visible').addClass('invisible'); /* *L'oggetto che ha avuto l'evento click ed ha un figlio di tipo ul *cambierà la sua classe da .invisible a .visible */ $(this).children('ul').removeClass('invisible').addClass('visible'); }); });
Rispondi quotando
