Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : pandronic 07 Apr 2012, 17:19:47
-
Ciao a tutti!
Mi stavo arrovellando su una tematica simile a quella postata da un nostro amico in questo messaggio:
http://forum.joomla.it/index.php/topic,139027.msg625495.html#msg625495 (http://forum.joomla.it/index.php/topic,139027.msg625495.html#msg625495)
Spiego bene: voglio creare nel mio sito Joomla (2.5, ma la versione non credo sia importante) un menu a tendina con solo css, sfruttando le proprietà display "none" e "block". Si tratta di una tecnica molto interessante per le tematiche legate all'accessibilità, e per realizzarla mi sono ispirato infatti a una tecnica del LAU (laboratorio accessibilità e usabilità).
Mi riesce piuttosto bene rendere visibile l'elemento lista secondario al passaggio del mouse sull'elemento lista primario grazie alla pseudoclasse :hover, tuttavia mi piacerebbe che una volta entrato all'interno della sottovoce di menu, questa rimanesse visibile quando si è nella pagina attiva.
Intuitivamente ho cercato di sfruttare la pseudoclasse :active come nel messaggio che ho linkato precedentemente, ma non ottengo il risultato sperato. Qualcuno saprebbe aiutarmi? Vi ringrazio e vi posto il codice che ho utilizzato, se qualcuno ha voglia di cimentarsi... ;)
/*stile di formattazione del menu*/
#menu ul{
list-style-type: none;
padding-left:23%;
text-align:left;
font-weight:bold;
font-size:1.05em;
}
#menu li{
list-style-type:none;
padding-left:0%;
padding-bottom:3%;
padding-top:3%;
}
#menu li:hover{
background-image:url(../images/freccia2.png);
background-repeat:no-repeat;
background-position:top right;
margin-right:25%
}
/*stile per nascondere le sottovoci di menu*/
#menu ul li ul{
font-size:0.9em;
display:none;
}
/*stili per mostrare le sottovoci di menu*/
#menu ul li:hover ul,
#menu ul li:focus ul,
#menu ul li:active ul {
display:block;
margin:0%;
padding-left:2%;
padding-top:1%;
padding-right:0%;
}
#menu ul li:hover ul li{
padding-left:40px;
padding-top:3%;
padding-bottom:3%;
}
-
Ho provato ad assegnare un suffisso classe al mio modulo menu chiamandola "_menu_interno" e scrivere nel template una classe moduletable_menu_interno ul li ul {display:block} nell'intento di annullare l'effetto del "display:none" della classe #menu. così facendo dovrei creare due moduli menu assegnati alle sottocategorie. purtroppo però non funziona. :(
-
Più che una soluzione un "workaround": ho creato un nuovo div menu nella pagina del template, richiamando una classe del tutto nuova nel css (uguale al menu con le voci nascoste, se non per il display:block di cui sopra e altre modifiche alla presentazione).
Considerando gli if statement che permettono di stampare un contenuto se questo è presente, ho creato una copia del menu a scomparsa associato ad un nuovo modulo (nella stessa posizione del menu a tendina).
Infine ho associato un modulo o l'altro alle diverse categorie.
Il giochetto funziona perché ho a che fare con un sito dalla struttura semplice, ma sulla soluzione ci sarebbe da lavorare ancora.
l'ideale sarebbe di lavorare solo col file template.css