PROGRAMMIAMO
HTML - Menu dinamici con CSS

Menu dinamici e pseudoclasse hover

Per affrontare la realizzazione di pagine dinamiche con i fogli stile, partiamo da un semplice esempio, particolarmente utile.

L'uso dei fogli stile CSS consente infatti di realizzare facilmente menu dinamici, cioè menu il cui aspetto cambia al passaggio del mouse sulle diverse voci. Qui sotto è mostrato un esempio di menu dinamico:

La tecnica per realizzare questi menu consiste nel definire un contenitore (tag <div>) con una classe o un id associato, dove viene specificato il comportamento del menu stesso. Nel dettaglio, il codice HTML del menu precedente è questo:

<div class="menucontainer">

<a href="#">Home</a>
<a href="#">Sezione uno</a>
<a href="#">Sezione due</a>
<a href="#">Sezione tre</a>
<a href="#">Sezione quattro</a>
<a href="#">Sezione cinque</a>

</div>

Il comportamento è specificato dalla classe menucontainer, così definita:

.menucontainer
{
width: 180px;
border-color: #94AA74;
border-width: 1px;
border-style: solid;
}

.menucontainer a {
width: 175px;
height: 25px;
padding-left: 5px;
display: block;
margin: 0;
background-color: rgb(201, 213, 179);
color: rgb(101, 113, 79);
border: 1px;
text-decoration: none;
font-weight: bold;
}

.menucontainer a:hover {
background-color: rgb(180, 190, 160);
}

In breve .menucontainer specifica dimensioni, colori e bordi del menu.

.menucontainer a specifica invece un cosiddetto selettore di discendente (descendant selector): in poche parole, specifica lo stile dei tag <a> che si trovano all'interno di una classe .menucontainer

L'aspetto più importante per la realizzazione del menu dinamico è la pseudoclasse hover. Essa indica il comportamento associato a un link (l'elemento a) quando il mouse passa sopra il link stesso (hover).

In questo modo la pagina è in grado di rispondere a un'azione dell'utente (il passaggio del mouse sopra a un elemento) modificando il proprio aspetto. Abbiamo dunque realizzato in questo modo una semplice pagina dinamica!

Realizzare menu dinamici con servizi web based

Vi sono numerosi siti che consentono di creare in modo automatico il codice per la realizzazione di menu dinamici.

Uno dei migliori è senz'altro CSS Menu Builder: come suggerisce il nome, si tratta di un sito che consente di costruire menu dinamici orizzontali e verticali, specificandone tutte le caratteristiche.

Un'altra possibilità è CSS3 Menu Generator, mediante il quale è possibile anche realizzare menu a drop down, cioè con sottomenu a discesa.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it