Sostituire, in menu evento HOVER con click CSS

[alexander1983]

Buongiorno,
sono nuovo del gruppo.
Ho da poco concluso un corso base di HTML e CSS quindi non me ne vogliate se ho un pochino di confusione.
Per esercitarmi ho pensato di rifare il mio ormai VECCHIO sito web personale.
Nello specifico ho , al momento, un problema:
Ho creato un menù che sotto una certa risoluzione poi scompare e appare il trigramma con il menù a comparsa.
Il problema che voglio sottoporvi è che sia nel menù "ridotto" che nel menù orizzontale appena posiziono il mouse su di una voce contenente il delle sottovoci (effetto HOVER) mi si apre il sottomenu.
io vorrei che non ci sia l'effetto hover ma solo al click e viceversa...cioè che ricliccando scompaiano le voci del sotto menu SPERO SENZA USARE JQUERY.
Questa è la pagina
http://www.la-maglia-rosanero.com/prova

ed ecco il codice css che immagino sia quello che ci interessa:

/*MENU PRINCIPALE*/


/* lista in orizzontale. inline-block è come inline, ma può avere altezza e larghezza. relative occorre per il sottomenu */

#menu li {
    display: inline-block;
    position: relative
}


/* menu. Cambiando center l'oriento a destra o sinistra */

#menu {
    width: 100%;
    background-color: #c5ad39;
    border-radius: 60px;
    text-align: right;
}


/* link menu. Cambiando 168px posso scrivere voci più lunghe */

li a {
    display: block;
    padding: 12px 20px;
    width: 168px;
    color: #040404;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    float: left;
}


/* link menu hover */

a:hover {
    color: #f7e1e4;
}


/* SOTTOMENU PRINCIPALE */

#menu li .hidden {
    display: block;
    position: absolute;
    top: 105px;
    left: 0;
    background-color: #c5ad39;
    visibility: hidden;
    margin-left: -5px;
    z-index: 10;
}


/* link sottomenu */

#menu li .hidden li a {
    width: 160px;
}


/* animazione per il passaggio sopra agli elementi del menu */

#menu li:hover .hidden {
    margin-top: -65px;
    visibility: visible
}


/* TRIGRAMMA */


/* stile e invisibilità */

.showMenu {
    width: 40px;
    border: 1px solid #c5ad39;
    margin: auto;
    color: #c5ad39;
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
    display: none
}


/* invisibilità checkbox
Il checkbox va nascosto in ogni caso ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta */

input[type=checkbox] {
    display: none
}


/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A; 
qui sta a significare che dà visibilità al menu quando il checkbox viene selezionato. */

input[type=checkbox]:checked~#menu {
    display: block
}


/*FINE HEADER CON MENU RESPONSIVE*/

Grazie a chi vorrà aiutarmi

[KillerWorm]

Ciao e benvenuto sul forum

Ho da poco concluso un corso base di HTML e CSS quindi non me ne vogliate se ho un pochino di confusione.

Figurati, penso sia normale, probabilmente non saresti qui se tu non avessi qualche buon dubbio

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.

[alexander1983]

Ciao grazie per la risposta.
La soluzione 4 si ci avevo pensato e sarebbe quella che più mi aggrada al momento.Quindi mi consigli ad esempio di dare uno sfondo diverso alle voci di sottomenu?

Ma la cosa che mi preme è quella di fare in modo che se riclicco ad esempio su MAGLIE PALERMO mi si richiuda il sotto menu... e invece rimane aperto.
Cosa posso fare?

[KillerWorm]

Quindi mi consigli ad esempio di dare uno sfondo diverso alle voci di sottomenu?

Potrebbe essere, oppure dare una indentatura/margine sinistro.

Ma la cosa che mi preme è quella di fare in modo che se riclicco ad esempio su MAGLIE PALERMO mi si richiuda il sotto menu... e invece rimane aperto.

Se le voci non sono poi così eccessive e può andare bene la soluzione 4, non serve che si richiuda alcun sottomenu.

Se invece preferisci che si chiuda, la soluzione più semplice è l'uso di JavaScript/jQuery.
Fai magari qualche ricerca sul web, l'argomento è ampiamente discusso, puoi trovare svariate soluzioni; prova magari ad applicarne qualcuna e se incontri difficoltà puoi chiedere qui sul forum nella sezione JavaScript