Tabbed Menu con CSS e HTML (anche tondi)

Ecco un semplice menù, fatto con CSS e HTML. In realtà c’è anche un pizzico di coldfusion per implementare anche lo stile per il TAB relativo alla sezione di navigazione. Partiamo con vedere come è fatto il codice HTML: <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 CSS. #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 css 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!

Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Tabbed Menu con CSS e HTML (anche tondi) scritto da Merlinox.