Ciao e benvenuto sul forum
Figurati, penso sia normale, probabilmente non saresti qui se tu non avessi qualche buon dubbioHo da poco concluso un corso base di HTML e CSS quindi non me ne vogliate se ho un pochino di confusione.
Un primo concetto da chiarire: CSS non è un linguaggio di programmazione e non possiede alcun "evento" che tu possa gestire in qualche modo.
La pseudo-classe :hover (come tutte la altre pseudo-classi CSS) rappresenta solo uno "stato" in cui un relativo elemento può trovarsi e per il quale possono essere definite delle regole CSS; è perciò sbagliato definirlo "evento", termine più appropriato per linguaggi di programmazione orientata ad oggetti, come JavaScript.
Avendo chiaro questo concetto si può intuire più facilmente che In CSS non esiste uno stato "click"; esiste tuttalpiù la pseudo-classe "checked" che è la cosa che più si avvicina al concetto di "evento click", ma che può essere applicata giusto a particolari elementi come checkbox, radio button, option, in cui è supportato l'omonimo attributo.
Ora, venendo al dunque, le soluzioni sono grossomodo tre o quattro:
1) usi un po' di JavaScript/jQuery (può benissimo essere del semplice JavaScript se jQuery ti spaventa) con cui utilizzi un gestore per l'evento click, appunto, da applicare a quegli elementi, per poter gestire in qualche modo l'apertura dei sottomenu.
2) con particolari trick CSS, usare dei checkbox e sfruttare il :checked per determinare l'apertura dei sottomenu messi, in qualche modo, in relazione con tali checkbox.
3) uso dei tag HTML <details> e <summary> con ci è possibile ottenere un semplice effetto a scomparsa.
4) lasciare semplicemente i sottomenu già aperti e migliorare giusto la presentazione in modo che sia più comprensibile la relazione tra la voce menu e il relativo sottomenu.
In genere la strada più praticata è la 1. Con qualche ricerca puoi trovare svariate soluzioni jQuery o comunque in puro JavaScript. Se poi ti serve particolare aiuto c'è sempre la sezione apposita qui sul forum. Attualmente non vedo validi motivi per evitare l'uso di una soluzione del genere; se questo ti spaventa perché sei completamente a digiuno di JavaScrip/Jquery penso possa comunque essere un motivo per iniziare ad affacciarsi con l'uso di queste tecnologie che, ad oggi, è fondamentale conoscere ed è inevitabile utilizzarle se si vuole proseguire nell'ambito della programmazione web.
La 2 la lascerei solo per i patiti del pure-css. Benché si possano usare soluzioni simili senza particolari controindicazioni a livello funzionale, si tratta comunque di "trucchi" css che lasciano il tempo che trovano, perché gli elementi in gioco non sono propriamente concepiti per lo scopo, anche se possono funzionare in quel modo. Lo sviluppo del codice necessario può comunque risultare poco pratico e intuitivo se non si ha piena padronanza del CSS. Se può interessarti, trovi qualche nozione al capitolo 8 dei link utili CSS, sotto la voce "Hover, active, checked..."
La 3 è una valida soluzione anche se poco conosciuta; con un po' di HTML e CSS, impostati adeguatamente, puoi ottenere un buon risultato e una impostazione del codice relativamente pulita. Ovviamente andrebbe rivisto il tutto per adeguarlo alle tue esigenze. Se può interessarti fai magari qualche ricerca del tipo "details summary dropdown menu".
Personalmente sceglierei la 4 se il numero di voci complessive risulta relativamente contenuto. Questa, al contrario di effetti di apertura, può risultare infatti una soluzione più ottimale da un punto di vista dell'usabilità da parte dell'utente, perché la fruizione delle voci risulta chiaramente più immediata.
Fai le tue considerazioni, se serve ulteriore aiuto chiedi pure.
Buon proseguimento
[MOD]
Occhio quando posti del codice sul forum, usa il tag [CODE] non il [QUOTE]; il pulsante negli strumenti dell'editor è quello col cancelletto [#] o altri che trovi nella "Modalità avanzata" con funzioni analoghe per codice HTML e PHP. Chiaramente per il momento ho provveduto io a correggere il tuo post; fai attenzione in seguito, grazie.
Rispondi quotando