menu verticale con sottomenu a scomparsa in css

Printable View

29-09-2009, 17.56.01

menu verticale con sottomenu a scomparsa in css

ciao a tutti!

sto cercando di creare un menu con alcune voci e sottovoci.
la particolarita è che le sottovoci sono nascoste e devono comparire solo al click del mouse sulla voce principale corrispondente.

ci sono quasi riuscito, cioè, sono riuscito a fare due menu mezzi funzionanti, il primo permette la corretta visualizzazione dei sottomenu al "passaggio" del mouse sulla voce principale.

il secondo esempio che sotto vi inserisco invece al click del mouse fa apparire il sottomenu ma questo scompare appena rilasciato il click.

<head>

<style>

#menu a {
display:block;
}

#menu li ul {
position:relative;
left:0;
top:0;
display:none;
}

#menu li:active ul,
#menu li:focus ul {
display:block;
}

</style>

</head>

<body>

<div id="menu">

<ul>

<li>
<a href="#nogo">Menu1</a>
<ul>
<li><a href="#nogo">Test titolo 1</a></li>
<li><a href="#nogo">Test titolo 2</a></li>
<li><a href="#nogo">Test titolo 3</a></li>
</ul>
</li>

</ul>

</div>

</body>

mi manca un ultimo passaggio! mi sapete aiutare per favore?

vi ringrazio infinitamente.

Daniele
01-10-2009, 10.49.52

Mmm... credo devi regolare la durata di permanenza. Posso consigliarti di usare lo script di Superfish Menu, che fa proprio quello che cerchi tu.
13-10-2009, 17.13.39

grazie per il suggerimento, ma sto cercando una soluzione in puro css....
senza javascript.

grazie
13-10-2009, 21.02.22

Citazione:

Originalmente inviato da danieledenicolo

grazie per il suggerimento, ma sto cercando una soluzione in puro css....
senza javascript.

grazie

Credo che con css e basta sia un po' difficile
04-11-2009, 19.59.49

difficile si, ma non impossibile.

sono riuscito a fare due cose, che combinate mi daranno la soluzione.
solo non trovo l'errore che commetto e che mi blocca:

primo esempio: menu

parte html

<div id="menu">
<ul id="nav">
<li><a href="index.php"><strong>HOME</strong></a></li>
<li><a><strong>LA PALESTRA</strong></a>
<ul>
<li><a href="chisiamo.php">CHI SIAMO</a></li>
<li><a href="storia.php">LA NOSTRA STORIA</a></li>
<li><a href="maestri.php">I MAESTRI</a></li>
<li><a href="direttivo.php">DIRETTIVO</a></li>
<li><a href="abbigliamento.php">ABBIGLIAMENTO SOCIETARIO</a></li>
</ul></li>
<li><a><strong>EVENTI</strong></a>
<ul>
<li><a href="esami.php">ESAMI</a></li>
<li><a href="stage.php">STAGE</a></li>
<li><a href="calendario.php">CALENDARIO GARE</a></li>
<li><a href="risultati.php">RISULTATI GARE</a></li>
</ul></li>
<li><a><strong>BACHECA</strong></a>
<ul>
<li><a href="articoli.php">ARTICOLI SUI GIORNALI</a></li>
<li><a href="giornale.php">GIORNALE SOCIETARIO</a></li>
<li><a href="maestro.php">GRAZIE MAESTRO</a></li>
<li><a href="precetti.php">PRECETTI DEL KARATE</a></li>
</ul></li>
<li><a class="menu_corr"><strong>GALLERIE</strong></a>
<ul>
<li><a href="foto.php">FOTO</a></li>
<li><a href="video.php">VIDEO</a></li>
</ul></li>
<li><a><strong>INFORMAZIONI</strong></a>
<ul>
<li><a href="contatti.php">CONTATTI</a></li>
<li><a href="orari.php">ORARI</a></li>
<li><a href="dovesiamo.php">DOVE SIAMO</a></li>
</ul></li>
</ul>
<hr />
</div>

parte css

#menu {
clear:both;
float:left;
width:175px;
font-size:70%;
margin:20px 10px 0 0;
}

#menu ul {
margin:0;
padding:0;
}

#menu a {
display:block;
color:#000033;
line-height:2.5em;
height:auto!important;
height:0;
border-bottom:1px dotted #000033;
text-decoration:none;
padding:0 0 0 20px;
}

#menu li ul {
position:relative;
left:0;
top:0;
display:none;
}

#menu li:hover ul,
#menu li.over ul {
display:block;
}

#menu li ul a {
color:#0066CC;
border-bottom:1px dotted #0066CC;
}

#menu a.menu_corr {
color:#ffcc00;
border-bottom:1px dotted #ffcc00;
border-left:10px solid #ffcc00;
padding:0 0 0 10px;
}

#menu a:focus,
#menu a:hover,
#menu a:active {
color:#000099;
border-bottom:1px dotted #000099;
border-left:10px solid #000099;
padding:0 0 0 10px;
background:#ccccff;
}

parte javascript (non intrusivo e solo per correggere un bug di ie6, su ff e su ie superiori non serve)

<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
04-11-2009, 20.02.52

secondo esempio: gallerie foto

parte html

<div id="gallery">

<ul>

<li>
<a href="#nogo">
<img src="immagini/02_1.jpg" alt="" class="thumb" />
<span>
<img src="immagini/02_1.jpg" alt="titolo immagine 1" />
<p>Test titolo immagine 1</p>
</span>
</a>
</li>

<li>
<a href="#nogo">
<img src="immagini/02_2.jpg" alt="" class="thumb" />
<span>
<img src="immagini/02_2.jpg" alt="titolo immagine 2" />
<p>Test titolo immagine 2</p>
</span>
</a>
</li>

<li>
<a href="#nogo">
<img src="immagini/02_3.jpg" alt="" class="thumb" />
<span>
<img src="immagini/02_3.jpg" alt="titolo immagine 3" />
<p>Test titolo immagine 3</p>
</span>
</a>
</li>

<li>
<a href="#nogo">
<img src="immagini/02_4.jpg" alt="" class="thumb" />
<span>
<img src="immagini/02_4.jpg" alt="titolo immagine 4" />
<p>Test titolo immagine 4</p>
</span>
</a>
</li>

</ul>

<div id="default"></div>

</div>

parte css

#default {
float:left;
width:300px;
height:300px;
margin:10px 0 0 2px;
border:1px solid #000033;
background:#ccccff url(../immagini/default.gif) no-repeat 50% 50%;
}

#gallery {
width:545px;
margin:10px auto;
}

#gallery ul {
padding:0;
margin:10px 0;
width:162px;
position:relative;
float:left;
}

#gallery li {
display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 2px 2px;
}

#gallery img {
border:0;
}

#gallery img.thumb {
display:block;
width:50px;
height:50px;
}

#gallery a,
#gallery a:visited {
display:block;
border:1px solid #000033;
background:#ffffff;
color:#000033;
text-decoration:none;
}

#gallery a:hover {
border:1px solid #ccccff;
}

#gallery a:active,
#gallery a:focus {
border:1px solid #ffcc00;
}

#gallery span {
display:none;
}

#gallery a:active span,
#gallery a:focus span {
display:block;
position:absolute;
top:0;
left:164px;
padding:0;
}

#gallery a:active span img,
#gallery a:focus span img {
width:auto;
height:auto;
border:1px solid #000033;
}

#gallery a:active span p,
#gallery a:focus span p {
color:#000033;
background:#ccccff;
line-height:1.1em;
margin:0;
padding:0;
font-size:80%;
}

questa funziona senza javascript pure su ie6
04-11-2009, 20.09.09

come potete vedere devo solo combinare i due esempi.
il mio problema è che nel secondo esempio che funziona a dovere all'interno del tag <a> gli elementi <span> e <p> li riesco a manovrare bene, appunto perchè interni ad <a>
mentre nel menu gli elementi da nascondere e visualizzare sono interni ad un <li> ma esterni rispetto all'elemento <a> che dovrebbe comandarli.

spero che gli esempi siano più chiari delle mie parole.

ripeto, quei due esempi funzionano benissimo, provateli voi stessi per capirne meglio il funzionamento.

grazie mille per l'aiuto.

Daniele