Menu a tendina realizzato solo con CSS

**Hobby** · 24-03-2008, 01:09

Per soddisfare alcune richieste, metto qui il codice per un esempio di menu a tendina orrizzontale fatto solo con CSS valido e funziona su tutti i browser

codice:

<!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>Menu a tendina</title>

<style type="text/css" media="screen">
#menu {
	width: 100%; 
	float: left; 
	margin: 0; 
	padding: 0;
	border-top: 1px solid black;
	background: #FFFFCC;
}
#menu dl {
	margin: 0;
	padding: 0;
}
#menu dd {
	width:100px;
	float:left;
	margin: 0;
	padding: 0;
	border-right: 1px solid black;
	color:black;
} 
#menu a {
	display: block;
	padding: 5px;
	color: #000;
	text-decoration: none;
}
#menu a:hover {
	background-color: #000033;
	color: #FFFFFF;
	text-decoration: none;
}
#menu dd dl {
	display: none;
}
#menu dd:hover dl {
	display: block;
	position: absolute;
	z-index:1;
	width:150px;
	padding: 0;
	margin: 0 0 0 -1px;
	border:1px solid black;
	background: #CCFFFF;
}
#menu dd dd {
	border: none; 
	width: 150px;
} 
#menu dd dd a {
	padding: 2px 2px 2px 10px;
}
</style>

</head>

<body>

<div id="menu">
    <dl>
        <dd>Menu 1
            <dl>
                <dd>SottoMenu 1</dd>
                <dd>SottoMenu 1</dd>
                <dd>SottoMenu 1</dd>
                <dd>SottoMenu 1</dd>
                <dd>SottoMenu 1</dd>
            </dl>
        </dd>
    </dl>
        
    <dl>
        <dd>Menu 2
            <dl>
                <dd>SottoMenu 2</dd>
                <dd>SottoMenu 2</dd>
                <dd>SottoMenu 2</dd>
                <dd>SottoMenu 2</dd>
                <dd>SottoMenu 2</dd>
            </dl>
        </dd>
    </dl> 
    
    <dl>
        <dd>Menu 3
            <dl>
                <dd>SottoMenu 3</dd>
                <dd>SottoMenu 3</dd>
                <dd>SottoMenu 3</dd>
                <dd>SottoMenu 3</dd>
                <dd>SottoMenu 3</dd>
            </dl>
        </dd>
    </dl>    

    <dl>
        <dd>Menu 4
            <dl>
                <dd>SottoMenu 4</dd>
                <dd>SottoMenu 4</dd>
                <dd>SottoMenu 4</dd>
                <dd>SottoMenu 4</dd>
                <dd>SottoMenu 4</dd>
            </dl>
        </dd>
    </dl>    

    <dl>
        <dd>Menu 5
            <dl>
                <dd>SottoMenu 5</dd>
                <dd>SottoMenu 5</dd>
                <dd>SottoMenu 5</dd>
                <dd>SottoMenu 5</dd>
                <dd>SottoMenu 5</dd>
            </dl>
        </dd>
    </dl>      
</div>





 

   </p>   
</body>
</html>

**Vincent.Zeno** · 24-03-2008, 02:41

bene bene bene... abbiamo voglia di lavorare, eh?

ora snocchiola lo JavaScriptino per falo girare su IE6

(non si espande la lista)

**Hobby** · 25-03-2008, 23:10

Originariamente inviato da Vincent.Zeno
bene bene bene... abbiamo voglia di lavorare, eh?

ora snocchiola lo JavaScriptino per falo girare su IE6

(non si espande la lista)

Un menu a tendina in JS? Non so fino a che punto sia utile perchè è difficile che molti riescano a personalizzarlo
Comunque ecco un esempio

**Vincent.Zeno** · 25-03-2008, 23:41

Originariamente inviato da Hobby
Un menu a tendina in JS?

ho detto che il tuo esempio (sebbene corretto) non gira su IE6,
non ti ho mica chiesto di farne uno in JS!

per farlo funzionare su IE6 serve un appoggio JS...

tutto qui.

**Hobby** · 29-03-2008, 01:07

Originariamente inviato da Vincent.Zeno
per farlo funzionare su IE6 serve un appoggio JS...

tutto qui.

Ciao
Ecco questo dovrebbe funzionare anche su IE6:

codice:

<!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>Menu a tendina</title>
<style media="screen" type="text/css">
* {
  margin: 0;
  border: 0;
  padding: 0;
}
dl, dt, dd{
	list-style-type: none;
}
#menu {
  width: 100%;
  float: left;
  border-top: 1px solid black;
}
#menu dl{
	float:left;
  background: #FFFFCC;
}
#menu dl.closed dd{
display: none;
}
#menu dl.open dd{
	display: inherit
}
#menu dt{
	width:100px
}
#menu dd {
  width:100px;
  border-right: 1px solid black;
  color:black;
}
#menu a {
  display: block;
  padding: 5px;
  color: #000;
  text-decoration: none;
}
#menu a:hover {
  background-color: #000033;
  color: #FFFFFF;
  text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 1</dt>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 2</dt>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 3</dt>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 4</dt>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 5</dt>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
</dl>
</div>










</p>
</body>
</html>

**Vincent.Zeno** · 29-03-2008, 01:41

perfetto: su IE6 funge anche con JS disabilitato.

peccato che disattivando JS su FF non funga.

tocchera integrarlo con commenti condizionali

**Hobby** · 29-03-2008, 01:52

Originariamente inviato da Vincent.Zeno
perfetto: su IE6 funge anche con JS disabilitato.

peccato che disattivando JS su FF non funga.

tocchera integrarlo con commenti condizionali

Ci godi a farmi lavorare?

**Vincent.Zeno** · 29-03-2008, 02:13

Originariamente inviato da Hobby
Ci godi a farmi lavorare?

si, è uno spasso

**Irene80** · 15-04-2008, 13:53

Per prima cosa: GRAZIE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Sono agli inizi imparo da sola e uso solo questo sito
Un conto è studiare la teoria con le guide base (molto utili) un altro è mettere in pratica.
Io non riesco a lavorare a memoria devo capire quindi dopo aver pasticciato con i il tuo codice per dritto e traverso ho già capito tantissimo e sono riuscita apersonalizzarlo, ma restano tanti punti interrogativi (domande forse stupide fatti pure delle risate)
Nel css si lavora con ID e stati (pseudo-classi giusto?): pensavo che ad ogni Id potessi dare il nome che volevo ma ora non sono più convinta perchè ho provato a sostituire #menu sia nel css che nell'(x)html con #ciccio e non funzionava più correttamente in questo caso bisogna dare nomi specifici? anche dd e dl sono specifici?
Premesso che penso di aver capito (+ o -) il discorso del box model
#menu dl {
margin: 0;
padding:0;
float: left
}
a cosa si riferisce?
Pensavo si riferisse alla formattazione del contenuto del menu principale rispetto al contenitore (in questo caso rispetto al background visto che non è contenuto in nulla) ma questo è già scritto in #menu e se lo tolgo non cambia nulla
Le domande sarebbero ancora tante, ma non voglio disturbare più di tanto
Ringrazio ancora e resto in attesa di risposta fai pure con comodo quando hai tempo e solo se ne ha voglia
Irene

**Hobby** · 15-04-2008, 14:48

Originariamente inviato da Irene80
Nel css si lavora con ID e stati (pseudo-classi giusto?): pensavo che ad ogni Id potessi dare il nome che volevo ma ora non sono più convinta perchè ho provato a sostituire #menu sia nel css che nell'(x)html con #ciccio e non funzionava più correttamente in questo caso bisogna dare nomi specifici?

Errore! Tu agli ID puoi dare il nome che vuoi, purchè non siano termini riservati, quindi se sostituisci #menu, con #ciccio funziona ugualmente, forse a te non funzionava perchè oltre a sostituire #menu con #ciccio, non hai sostituito anche <div id="menu"> con <div id="ciccio">

Originariamente inviato da Irene80
anche dd e dl sono specifici?

Si dl, dt e dd sono specifici per le «liste di definizione».

Originariamente inviato da Irene80
Premesso che penso di aver capito (+ o -) il discorso del box model
#menu dl {
margin: 0;
padding:0;
float: left
}
a cosa si riferisce?
Pensavo si riferisse alla formattazione del contenuto del menu principale rispetto al contenitore (in questo caso rispetto al background visto che non è contenuto in nulla) ma questo è già scritto in #menu e se lo tolgo non cambia nulla

«<div id="menu">» è il contenitore dell'intero menu, «dl è il contenitore della lista»

Discussione: Menu a tendina realizzato solo con CSS

Strumenti discussione

Ricerca discussione

Visualizza

Menu a tendina realizzato solo con CSS

Permessi di invio