CSS  »  Articoli  »  CSS Menu 

Negli esempi di questo articolo verrano illustrate due tecniche fondamentalmente diverse per raggiungere un risultato simile. Partiamo dal presupposto di voler realizzare un menu a tab e centrato orizzontalmente nella finestra del browser, attraverso una struttura XHTML classica realizzatata con una lista non ordinata (<ul>), assicurandone la resa cross-browser senza utilizzare hack CSS, regole non standard (display:inline-block è un esempio), o peggio, Javascript.

Voglio ricordare in proposito alcune risorse meritevoli di menzione: l'articolo di Alessandro Fulciniti tab grafiche centrate, e due versioni delle Sliding Doors, Centered Sliding Doors Menus da Explodingboy, e 100% clickable Sliding doors - centered da CSSPlay, che propongono degli esempi di menu centrati con tab ad angoli arrotondati che però utilizzano degli hack per ottenere la compatibilità con le diverse e capricciose versioni di Internet Explorer.

Primo esempio

Nella creazione di una barra di navigazione centrata l'approccio più ovvio (e quindi anche forse più diffuso) prevede di centrare degli elementi, come nel caso delle voci di un menu, di dimensioni non note a priori, attraverso le regole CSS display:inline (applicata su di essi) e text-align:center (applicata al loro contenitore). Vediamo subito la struttura HTML base necessaria:

<div id="navigation">
  <ul>
    <li><a href="#" title="home">Home</a></li>
    <li><a href="#" title="profilo">Profilo</a></li>
    <li><a href="#" title="notizie">Notizie</a></li>
    <li><a href="#" title="porfolio">Portfolio</a></li>
    <li><a href="#" title="prodotti">Prodotti</a></li>
    <li><a href="#" title="blog">Blog</a></li>
    <li class="last"><a href="#" title="contatti">Contatti</a></li>
  </ul>
</div>

Come abbiamo già detto, per affiancare le voci del menu utilizzeremo su di esse la dichiarazione display:inline, evitando accortamente l'utilizzo dei float, cosa che ci consente una agevole e robusta centratura applicando la dichiarazione text-align:center direttamente sull'elemento <ul>.

Diversamente, utilizzando proprio la proprietà "float:left" per affiancare le voci della lista, l'unico modo per centrare il menu è assegnare una larghezza definita e la proprietà margin:0 auto all'elenco non ordinato. Una soluzione comunque imperfetta: pensiamo a quali disastri potrebbe provocare un eventuale ingrandimento del testo da parte dell'utente. Inoltre l'applicazione di un tale metodo non si dimostra nemmeno flessibile, di fronte alla necessità di incrementare il numero delle tab saremo ad esempio per forza di cose costretti a variare anche la width dell'elenco.

Torniamo piuttosto sui nostri argomenti cominciando ad analizzare più in dettaglio gli stili CSS e il parziale risultato nella pagina di prova:

body {
    margin:0; padding:0;
    background:#FFFFFF; color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:85%;
}

#navigation {
    background:#7FAACA url(bg-nav.jpg) repeat-x;
    border-bottom:1px solid #999999;
}

#navigation ul, #navigation ul li {
    list-style:none;
    margin:0; padding:0;
}

#navigation ul {
    text-align:center;
    padding:0.5em 0;
}

#navigation ul li {
    display:inline;
    margin-right:0.5em;
}

#navigation ul li.last {
    margin-right:0;
}

#navigation li a {
    padding:0.5em 1em;
    background:#FFFF00;
}

Altri articoli

Altre guide

Altre newsletter