Tabbed Menu con CSS e HTML (anche tondi) | MrX

« Google Video: aggiornamenti in corso | Main | La mia personalità (fotografica) »

Tabbed Menu con CSS e HTML (anche tondi)

By Merlinox | June 14, 2007

Ecco un semplice menù, fatto con e . In realtà c’è anche un pizzico di per implementare anche lo stile per il TAB relativo alla sezione di navigazione.

Partiamo con vedere come è fatto il codice :


<div id="menu">

<cfset pagina = listLast(cgi.SCRIPT_NAME,”/”)>
<a href=”prodotti.cfm” <cfif pagina is “prodotti.cfm”> class=”on” </cfif> >Prodotti articoli</a>
<a href=”prodotti_categorie.cfm” <cfif pagina is “prodotti_categorie.cfm”> class=”on” </cfif> >Prodotti categorie</a>
<a href=”news.cfm” <cfif pagina is “news.cfm”> class=”on” </cfif> ><b>News</b></a>
<a href=”eventi.cfm” <cfif pagina is “eventi.cfm”> class=”on” </cfif> ><b>Eventi</b></a>
<a href=”rassegna.cfm” <cfif pagina is “rassegna.cfm”> class=”on” </cfif> ><b>Rassegne stampa</b></a>
<a href=”index.cfm” class=”alt”><b>Home</b></a>
<a href=”logout.cfm” class=”alt”><b>LOGOUT</b></a>
</div>

Nulla di complesso. Un insieme di link. Volendo gestirlo in modo miglore, si possono inserire i link in un punto elenco, scelta sicuramente quasi obbligatoria in regime di accessibilità. Associo alla variabile pagina il nome della pagina in cui siamo (esempio prodotti.cfm) e tramite i <cfif> verifico se siamo in quella pagina. Se si assegno la classe on.

Passiamo ora a vedere il .

#menu{
padding-left: 0px;
}
#menu a{
color: #cccccc;
background-color: #0C78E4;
padding: 5px 10px 5px 10px;
margin: 10px 1px 0px 0;
text-decoration: none;
text-transform: uppercase;
font-family: Trebuchet MS;
font-size: 12px;
float: left;
}
#menu a.alt{
background-color: #666;
}
#menu a.on{
background-color: #ffffff;
color: #0C78E4;
border: 1px solid #0C78E4;
border-bottom: 0px;
/* adatto margin in base all'aumento del padding */
padding-bottom: 12px;
margin-top: 3px;
}
#menu a:hover{
color: #ffffff;
background-color: #52a4f5;
/* adatto margin in base all'aumento del padding */
padding-bottom: 12px;
margin-top: 3px;
}
#menu a.alt:hover{
background-color: #F30;
}

Il menù è identificato da un id menu. Definiamo poi lo stile per i link standard a per i link particolari a.alt e per i link della zona in cui siamo a.on.
Con a:hover definiamo invece lo stile al rollover. Ricordiamoci però che sono gestibile anche a:active e a:focus.

Al fine di mantenere i tab uno a fianco dell’altro (ignorando eventuali spazi) ho ridefinito il tag a come float:left. Sarà quindi necessario chiudere il tutto con un clear!

Se volete mettere un angolino tondo (a destra) potete usare niftycube oppure questo semplicissimo:

/*angolo tondo*/
background-image: url(immagini/menuTop-angolo.gif);
background-position: top right;
background-repeat: no-repeat;

Da aggiungere alla ridefinizione dello stile del link (#menu a). L’immagine fatela un po’ come volete, io ho fatto un angolino bianco (come lo sfondo) di 9×9 pixel.

E adesso, buon lavoro!

Esempio online

Accontento Giobi, e spero molti altri, inserendo una pagina di esempio: CSS Tabbed Menu!

Piaciuto il post, condividilo:

Tags: , ,

Post simili

5 Responses to “Tabbed Menu con CSS e HTML (anche tondi)”

  1. Mavero aggiunge:
    May 25th, 2007 at 2:42 pm

    Però un bel link demo non avrebbe guastato ;)

  2. Merlinox aggiunge:
    May 25th, 2007 at 3:09 pm

    Grazie che ti sei proposto. :)

  3. giobi aggiunge:
    June 13th, 2007 at 9:37 am

    ma non posso vederne un esempio?

  4. Merlinox aggiunge:
    June 13th, 2007 at 2:02 pm

    Giobi basta veramente che fai copia incolla in un html :) Se ho tempo provo a fartelo ma in questi giorni sono veramente preso male.
    Purtroppo ce l’ho da vedere ma in un CMS.

  5. Merlinox aggiunge:
    June 14th, 2007 at 10:24 am

    Giobi ti ho messo la paginetta di esempio :)

Comments