Menu CSS – Menu a blocchi
0 - Categoria: CSS
Ciao ragazzi, oggi mi è venuto in mente di voler creare una collezione di menu css, che potessere aiutare, chi mi segue, nella creazione delle proprie pagine web e perché no anche i più esperti di CSS per relazionarsi con me e gli altri, alla scoperta di nuove e personali tecniche di realizzazione dei menu ma anche di interi layout grafici.
Iniziamo con un menu semplicissimo: un menu css a blocchi.
MENU CSS A BLOCCHI VERTICALE
Il codice (x)html del menu si presenta davvero in manuere semplice, una semplice lista non ordinata <ul>:
<ul> <li><a href="#">prima</a></li> <li><a href="#">seconda</a></li> </ul>
Il codice CSS o per meglio dire le “regole CSS” da utilizzare sono:
.menu{width:180px;margin:0;padding:0}
.menu li{list-style:none;}
.menu a{
display:block;
text-decoration:none;
background-color:#CCCCCC;
border:1px solid #000;
margin:1px 0px;
padding:3px 10px;}
.menu a:link, .menu a:visited{
color:#000000;}
.menu a:hover{
color:#FFF;
background-color:#CC0033;
border-color:#CCCCFF;}
Questo codice presenta un bug per Internet Explorer, poichè gli elementi XHTML ‘<a>‘, definiti come elementi di tipo blocco con la regola:”display:block‘ nel codice css, vengono mal interpretati dai browser di casa Microsoft (assurdo per altro visto che hanno quasi il monopolio informatico sui browser) poiché creano degli spazi aggiuntivi che creano problemi di impaginazione.
Per evitare questo tipo di problema vi ho preparato un hack da inserire dopo lo style gia mostrato, sempre all’interno del tag <head></head> che andrà ad aggiungere due regole ai tag <li> e al tag <a>. Questo hack siccome è scritto sottoforma di commento verrà interpretato solo dai browser Microsoft! 
<!--[if IE]>
<style>
.menu li{ display:inline;}
.menu a{height:0px;}
</style>
<![endif]-->
Per i più tosti di comprendonio…..ho preparato una pagina ad hoc da copiare ed incollare per i propri esperimenti:
<html><head>
<style>
.menu{width:180px;margin:0;padding:0}
.menu li{list-style:none;}
.menu a{
display:block; text-decoration:none;
background-color:#CCCCCC;
border:1px solid #000;
margin:1px 0px;
padding:3px 10px;}
.menu a:link, .menu a:visited{ color:#000000;}
.menu a:hover{ color:#FFF;
background-color:#CC0033; border-color:#CCCCFF;}
</style>
<!--[if IE]>
<style>
.menu li{ display:inline;}
.menu a{height:0px;}
</style>
<![endif]--
>
</head>
<body>
<ul>
<li><a href="#">prima</a></li>
<li><a href="#">seconda</a></li>
</ul>
</body>
/html>
Ho creato una pagina apposita per questo esempio: Menu CSS a Blocchi
Commentate con i vostri esperimenti!
