Menu con i CSS

Ci sono molti modi per costruire menu di navigazione più o meno complicati. Ci sono anche programmi fatti apposta per generare il codice per i menu in automatico, solo che spesso succede che se si deve modificare una parte del menu o anche solo modificarne una voce, bisogna ricostruirlo tutto da zero.

Poichè i menu sono l'elemento che forse viene modificato più spesso in un sito internet dopo il testo delle pagine, è meglio prevedere un modo rapido per fare le modifiche successive.

In questo caso si fa uso delle liste e dei css: l'assoluta comodità di questo metodo sta nel fatto che per modificare, aggiungere o togliere una voce dal menu, basta modificare semplicemente la lista delle voci di menu che sta nella pagina html: se il foglio di stile esterno è ben organizzato, le nuove voci aggiunte prenderanno immediatamente la forma e la posizione voluta.

Si possono costruire menu semplici verticali od orizzontali, con o senza tendina, con vari effetti sui pulsanti. Via via che ne svilupperò di nuovi verranno inseriti in queste pagine.

Con i CSS bisogna sempre guardare alle compatibilità con i vari browser (soprattutto la solita pecora nera è Internet Explorer): non succede quasi mai di vedere un risultato completamente identico in tutti i casi, in genere conviene costruire un menu tenendo d'occhio il risultato in particolare con Firefox, che è quello che risponde in modo più corretto alle varie istruzioni CSS, e poi vedere l'effetto che quel foglio di stile genera su Internet Explorer e apportare le sole modifiche necessarie ad esso con un altro foglio apposito.

In aggiunta, nel caso dei menu a tendina (non quindi in quelli semplici verticali od orizzontali) Internet explorer, per un suo difetto, ha bisogno di una fondamentale patch open source in javascript che rende IE maggiormente compatibile con i css:questa patch è un progetto open source e in questo caso essa è utile per far comparire e scomparire la tendina nei vari menu al passaggio del mouse cosa che normalmente Internet Explorer non riesce a fare.

Tale patch non deve essere scaricata dal singolo utente a parte, ma si inserisce come cartella di file nella directory principale del sito web sul server che lo ospita e poi va inserito l'apposito link sulla pagina come vedremo in dettaglio.

In queste pagine dunque troverete i codici per menu di navigazione (orizzontali e verticali) senza tendina e menu di navigazione (orizzontali e verticali) a tendina che ho sviluppato partendo da varie risorse sul web rielaborate in modo personale:

• Menu di navigazione semplici senza tendina con i fogli di stile CSS
  • Menu di navigazione verticale semplici senza tendina con i fogli di stile CSS
  • Menu di navigazione orizzontale semplici senza tendina con i fogli di stile CSS
• Menu di navigazione a tendina con i fogli stile CSS
  • Menu di navigazione verticale a tendina con i fogli di stile CSS
  • Menu di navigazione orizzontale a tendina con i fogli di stile CSS

Buona lettura!