Menu verticale con subvoci

peppepegasus

Utente Attivo
20 Ott 2006
108
0
0
ciao,

ho cercato dei menu verticali che abbiano delle sottovoci e da poter integrare facilmente in un template. Vorrei usare solo CSS senza javascript, jquery e quant'altro, solo CSS.
Però non sono riuscito a trovare nulla che riuscisse ad essere integrato e fosse funzionante.
Mi sono proposto di utilizzare il menu del template e aggiungere le sottovoci con la definizione delle proprietà CSS per fare tale menu.
Il codice è questo:

Codice:
<ul>
	<li class="title">Menu</li>
	<li class="group"><a href="">Voce1</a></li>		
	<li class="group"><a href="">Voce2</a></li>
	<ul>
	        <li><a href="">Sottovoce1</a></li>
		<li><a href="">Sottovoce2</a></li>
		<li><a href="">Sottovoce3</a></li>
	</ul>
	<li class="group"><a href="">Voce3</a></li>
	<li class="group"><a href="">Voce4</a></li>
	<li class="group"><a href="">Voce5</a></li>			
</ul>
Le voci del menu sono: Menu, Voce1, Voce2, Voce3, Voce4, Voce5. Sulla Voce2 cliccando sopra mi devono apparire le Sottovoce1,2 e 3, cliccando sulla Voce2 se è aperto il menu delle sottovoci devono sparire.
Qualcuno mi può aiutare a definire le proprietà del sottomenu per l'apertura e chiusura delle Sottovoci1,2,3?
grazie spero di essere stato chiaro nella mia richiesta!
Grazie!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Una soluzione con i css potrebbe essere questa

HTML:
<style type="text/css">
    ul {
        margin: 0;
        list-style-type: none; 
    }
    ul ul{
        width: 120px;
        display: none;
    }
    ul li:hover ul{
        display: list-item;
    }
</style>
<ul>
    <li class="title">Menu</li>
    <li class="group"><a href="">Voce1</a></li>		
    <li class="group"><a href="">Voce2</a>
        <ul>
            <li><a href="">Sottovoce1</a></li>
            <li><a href="">Sottovoce2</a></li>
            <li><a href="">Sottovoce3</a></li>
        </ul>
    </li>
    <li class="group"><a href="">Voce3</a></li>
    <li class="group"><a href="">Voce4</a></li>
    <li class="group"><a href="">Voce5</a></li>			
</ul>

Sfrutta l'evento hover

per l'evento onclick credo sia necessario javascript

PS: l 'ul interna deve essere racchiusa nel tag li come ho postato
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Come modificare un menu verticale spry con Dreamweaver Webdesign e Grafica 8
A Menu verticale con immagini Javascript 3
TONY1960 [HTML] MENU VERTICALE SEMPRE VISIBILE Offerte e Richieste di Lavoro e/o Collaborazione 6
N Menu verticale semplice stile Yahoo WordPress 2
Shyson Menu verticale Javascript 16
Artemisia Menu verticale link aperto Javascript 1
W Menu verticale animato ed espandibile HTML e CSS 0
N menu a espansione verticale Javascript 2
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0

Discussioni simili