menù a tendina

16-05-2013, 19.07.07

Salve a tutti
vengo subito al dunque

devo creare un menù a tendina nascosto...
ovvero la prima voce è visibile e le altre compaiono/scompaiono quando clicco su quella " sempre visibile"

il menù sono riuscito a realizzarlo ma tutti i sottomenù che appaiono, appaiono all'hover...
come faccio a metterli che appaiano al click e scompaiano ricliccando sulla scritta???

IL TUTTO DEVE ESSERE IN HTML E CSS NO JAVA

IL MIO HTML

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="Senzatitolo-2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="navcontainer">
	<ul class="navlist">
      <li class="active"><a href="#">prima voce</a> 
       		<ul>
        		<li><a href="#">primo sottotitolo</a></li>
        		<li><a href="#">second osottotitolo</a></li>
        		<li><a href="#">terzo sottotitolo</a></li>
        		<li><a href="#">quarto sottotitolo</a></li>
			</ul>

		</li>
        
        
        
		
      <li class="active"><a href="#">seconda voce</a>
        	<ul>
            	<li><a href="#">primo sottotitolo</a></li>
                <li><a href="#">secondo sottotitolo</a></li>
                <li><a href="#">terzo sottotitolo</a></li>
        		<li><a href="#">quarto sottotitolo</a></li>
            </ul>
        </li>
      
      
      
        
		<li class="active"><a href="#">terza voce</a>
        	<ul>
            	<li><a href="#">primo sottotitolo</a></li>
                <li><a href="#">secondo sottotitolo</a></li>
                <li><a href="#">terzo sottotitolo</a></li>
        		<li><a href="#">quarto sottotitolo</a></li>
            </ul>
        </li>
      
      
      
       
		<li class="active"><a href="#">quarta voce</a>
        	<ul>
            	<li><a href="#">primo sottotitolo</a></li>
                <li><a href="#">secondo sottotitolo</a></li>
                <li><a href="#">terzo sottotitolo</a></li>
        		<li><a href="#">quarto sottotitolo</a></li>
            </ul>
        </li>
      
      
      
        
	</ul>
</div>



</body>
</html>

IL CSS

Codice:

@charset "utf-8";
/* CSS Document */


.navlist
{
list-style-type: none;
color: darkgray;
background-color: gainsboro;
margin-left: 5px;
}

.active:hover li { display: block; }
.active li { display: none; }

.navcontainer
{
width: 220px;
background-color: gainsboro;
border: 1px gray solid;
}

.navcontainer a
{
color: gray;
background-color: gainsboro;
width: 120px;
display: block;
}

.navcontainer a:visited
{
color: gray;
background-color: gainsboro;
}

.navcontainer a:active
{
color: white;
background-color: gray;
}

.navcontainer a:hover
{
color: red;
background-color: black;
}

**karl94** · 16-05-2013, 20.27.01

Senza Javascript viene un po' in salita e le tecniche che sono disponibili attualmente potrebbero non funzionare con tutti i browser (e sono comunque poco eleganti e portano anche qualche difetto), impedendo così la navigazione ai tuoi utenti. Ti sconsiglio di implementare un menù così.

16-05-2013, 21.29.43

Originalmente inviato da karl94

Senza Javascript viene un po' in salita e le tecniche che sono disponibili attualmente potrebbero non funzionare con tutti i browser (e sono comunque poco eleganti e portano anche qualche difetto), impedendo così la navigazione ai tuoi utenti. Ti sconsiglio di implementare un menù così.

ti ringrazio per il consiglio...sul mio sito ho usato java
ma siccome è una cosa per scuola e la prof ci ha impedito di usarlo ma ci ha vincolati ad html e php.... -.-

**karl94** · 16-05-2013, 21.49.50

Originalmente inviato da fabiovergotti

ti ringrazio per il consiglio...sul mio sito ho usato java

Java o Javascript? Conosci la differenza, vero?

Originalmente inviato da fabiovergotti

ma siccome è una cosa per scuola e la prof ci ha impedito di usarlo ma ci ha vincolati ad html e php.... -.-

Ma ha espressamente richiesto un menù con queste caratteristiche? O l'idea del menù è tua?

16-05-2013, 22.21.02

Originalmente inviato da karl94

Java o Javascript? Conosci la differenza, vero?
Ma ha espressamente richiesto un menù con queste caratteristiche? O l'idea del menù è tua?

richiesta

**karl94** · 16-05-2013, 22.29.23

Gli unici modi che mi vengono in mente per realizzarlo in solo CSS è usare la pseudo classe target (con la grande scomodità dello scorrimento della pagina) o usare elementi dei moduli come i pulsanti radio e poi le pseudo classi come selected, però questa seconda opzione non sarebbe semanticamente corretta.

16-05-2013, 22.45.16

e la pseudo classe targhet in cosa consisterebbe? perdona l'ignoranza

**karl94** · 18-05-2013, 17.41.12

È un selettore che identifica l'elemento indicato dall'identificatore di frammento. Effettua una piccola ricerca per maggiori informazioni. Se vuoi vedere come si può usare per un menù a tendina, aggiungi alla stringa di ricerca dropdown menu.

**acsocmel** · 18-05-2013, 18.20.54

Originalmente inviato da karl94

Senza Javascript viene un po' in salita e le tecniche che sono disponibili attualmente potrebbero non funzionare con tutti i browser

e/o richiedere l'inserimenti di elementi vuoti / non semantici, quindi
dille tranquillamente che la richiesta è sensa senso

però puoi sempre fare tante pagine per le varie voci di menù

18-05-2013, 19.20.20

ok grazie mille

Discussione: menù a tendina

LinkBack

Strumenti discussione

Display

menù a tendina

Regole di scrittura