Menù con le linguette

This is an old article, from a time I thought I’d be writing this blog in Italian. Now I’ve changed my mind and everything new is supposed to be in English. Since there is nothing particularly interesting or original in these old posts, I’ll just leave them here in Italian. If you can’t read Italian, you’re not missing much.

Come realizzare quei triangolini che compaiono sotto i menù quando sono selezionati? Ci sono sicuramente diversi tutorial in rete, ma non sono riuscito a trovarne nemmeno uno quando mi serviva. Ecco quindi in poche righe la soluzione che ho trovato.

L’ispirazione viene dall’unione di due tecniche molto comuni: la possibilità di creare delle forme geometriche con le pseudoclassi CSS e il metodo per centrare gli elementi posizionati in maniera assoluta.

Il tutto, ovviamente, senza introdurre immagini o elementi aggiuntivi senza alcun significato semantico.

Tipicamente abbiamo un menù fatto così:

      ul {
         list-style-type: none;
         background-color: #339;
         height: 36px;
       }
      
      li {
         float: left;
      }
      
      li a {
         display: block;
         padding: 10px 20px;
         color: #fff;
         text-decoration: none;
      }

      li a:hover,
      li .current {
         background-color: #69c;
      }

Per aggiungere i triangolini sull’:hover e/o quando siamo nella sezione interessata, basta rendere relative la posizione del link:

    li a {
         display: block;
         padding: 10px 20px;
         color: #fff;
         text-decoration: none;
         position: relative;
      }

e aggiungere una pseudo classe :after posizionata in maniera assoluta:

      li a:hover:after,
      li .current:after {
         content: "";
         position: absolute;
         bottom: -10px;
         left: 50%;
         margin-left: -10px;
         width: 0;
         height: 0;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-top: 10px solid #69c;
      }

Analizziamo quest’ultima voce.

:after è appunto la pseudo classe che aggiunge del contenuto dopo l’elemento indicato.
Non c’è content perché non abbiamo del reale contenuto aggiunto.
La posizione è assoluta, come già detto, e centrata a metà del link. Qui sorge il problema principale: siccome le voci del menù sono di larghezza variabile, posizionando in maniera assoluta a metà elemento il triangolino, questo resterà sempre spostato verso destra, perché sarà il suo vertice destro a partire esattamente a metà dello spazio a sua disposizione. Diminuire leggermente il valore percentuale non aiuta, perché il triangolino ha dimensione fissa mentre il link che lo contiene varia. Viene in nostro soccorso il margine sinistro: fissandolo dello stesso valore della larghezza del triangolino, in negativo, quest’ultimo verrà “trascinato” a sinistra esattamente quando basta per centrarlo perfettamente a prescindere dalla larghezza del link.
Le ultime righe di codice sono il solito trucchetto per creare i triangoli, giocando con le proprietà dei bordi.

(Se al posto di :after avessimo usato :before sarebbe stata la stessa cosa. Risulta più intuitivo usare :after visto che la linguetta viene… dopo!)

Qui potete trovare una demo.

Naturalmente su Internet Explorer 6 e 7 non si vedranno le linguette perché nessuno dei due supporta :after. Tutti gli altri browser (Internet Explorer 8 incluso) invece sì, quindi la cosa non è un problema, perché le linguette sono un semplice miglioramento estetico; siccome forniamo comunque all’utente un metodo per capire in quale sezione siamo e/o che stiamo passando sopra a un link con il mouse (con il colore di sfondo che cambia).

N.B.: In generale, visto che i li hanno un float: left per poter stare uno di fianco all’altro, il loro container (ul) tipicamente non ha altezza se non la si dichiara esplicitamente (come in questo caso). In alternativa si può dichiarare anch’esso come float, oppure assegnargli una classe clearfix (di cui riparleremo, si può trovare nel CSS del Boilerplate, intanto). Altra alternativa è aggiungere overflow: hidden o overflow: auto al container… ma in questo caso attenzione perché le linguette, siccome sforerebbero, potrebbero essere troncate (se hidden) o far comparire una barra di scorrimento (se auto).

1 Comment

  1. Solo desiderio di dire il vostro articolo è sorprendente .
    La chiarezza alla mettere è semplicemente eccellente e che
    i riuscivo pensare sei un professionista a questa . Belle con il
    vostro consenso consentirà me prendere in mano di Feed
    RSS di tenere updared con imminente palo . Grazie
    milione e continua di gratificante lavoro .

Leave a Reply

Required fields are marked *.