Un semplice menù in HTML e CSS
Gio 24 Gen 2008
   





Introduzione

È possibile realizzare dei semplici ma gradevoli menù utilizzando solamente html e css. Si vedranno degli esempi di menù orizzontali e verticali.
Tutti e due i menù sono relizzati con delle liste, quindi utilizzando il tag <ul> di html. Ogni elemento della lista sarà un elemento del menù. Successivamente tramite le regole di stile si andrà ad incidere sulla visualizzazione del menù.

Menù Orizzontale

Il file html ed il foglio di stile sono i seguenti

menu_hor.css
  1. #menu_hor
  2. {
  3. list-style: none;
  4. font-family: arial;
  5. font-size: 12px;
  6. }
  7.  
  8. #menu_hor li
  9. {
  10. display: inline;
  11. }
  12.  
  13. #menu_hor li a
  14. {
  15. width: 100px;
  16. padding: 3px;
  17. text-decoration:none;
  18. }
  19.  
  20. #menu_hor li a:link, #menu_hor li a:visited
  21. {}
  22.  
  23. #menu_hor li a:hover
  24. {
  25. background-color:aqua;
  26. }

 

menu_hor.html
  1. <html>
  2. <head>
  3. <title>Esempio Menu Orizzontale</title>
  4. <link rel="stylesheet" href="menu_hor.css" />
  5. </head>
  6. <body>
  7. <center>Menù Orizzontale</center>
  8. <ul id="menu_hor">
  9. <li><a href="">link1</a></li>
  10. <li><a href="">link2</a></li>
  11. <li><a href="">link3</a></li>
  12. </ul>
  13. </body>
  14. </html>

Il menù è quindi costituito da una lista, ottenuta tramite il tag <ul> di html, a cui viene applicata la regola di stile menu_hor

  1. #menu_hor
  2. {
  3. list-style: none;
  4. font-family: arial;
  5. font-size: 12px;
  6. }

in cui si specifica che non deve essere inserito alcun simbolo prima di ogni elemento della lista, list-style: none, e che il font da utilizzare è arial e la dimensione dei caratteri è di 12 pixel.
Applicando questa regola il menù sarà costituito da una lista, verticale, senza alcun simbolo prima degli elementi con caratteri in arial a 12 pixel.
Affinchè la lista sia scritta in orizzontale è necessario applicare la seguente regola di stile agli elementi della lista

  1. #menu_hor li
  2. {
  3. display: inline;
  4. }

senza gli elementi della lista verrebbero scritti in verticale e non in orizzontale, in sostanza si avrebbe un menù verticale piuttosto che un menù orizzontale.
Si può poi impostare la dimensione di ogni elemento della lista applicando la regola di stile seguente

  1. #menu_hor li a
  2. {
  3. width: 100px;
  4. padding: 3px;
  5. text-decoration:none;
  6. }

con la quale si indica anche che i link presenti nella lista non saranno sottolineati. Con la regola seguente

  1. #menu_hor li a:hover
  2. {
  3. background-color:aqua;
  4. }

si indica che il link su cui passa il cursore dovrà avere come colore di background il colore specificato.

L'esempio è il seguente

Menù Orizzontale

Menù Verticale

Il file html ed il foglio di stile sono i seguenti

menu_hor.css
  1. #menu_ver
  2. {
  3. list-style: none;
  4. font-family: arial;
  5. font-size: 12px;
  6. }
  7.  
  8. #menu_ver li
  9. {
  10. }
  11.  
  12. #menu_ver li a
  13. {
  14. display:block;
  15. width: 80px;
  16. padding: 3px;
  17. text-decoration:none;
  18. }
  19.  
  20. #menu_hor li a:link, #menu_hor li a:visited
  21. {}
  22.  
  23. #menu_hor li a:hover
  24. {
  25. background-color:aqua;
  26. }



menu_ver.html
  1. <html>
  2. <head>
  3. <title>Esempio Menu Verticale</title>
  4. <link rel="stylesheet" href="menu_hor.css" />
  5. </head>
  6. <body>
  7. <center>Menù Verticale</center>
  8. <ul id="menu_ver">
  9. <li><a href="">link numero 1</a></li>
  10. <li><a href="">link2</a></li>
  11. <li><a href="">link3</a></li>
  12. </ul>
  13. </body>
  14. </html>

Il documento html è pressoché uguale a quello relativo al menù orizzontale e il foglio di stile è in parte simile a quello relativo al menù orizzontale.
In questo caso il menù deve essere verticale e quindi non c'è bisogno della regola di stile introdotta nell'esempio precedente per rendere il menù orizzontale.
Per rendere uguale per tutti gli elementi del menù l'area che verrà evidenziata al passare del mouse si introduce la seguente regola di stile

  1. #menu_ver li a
  2. {
  3. display: block;
  4. ....
  5. }

L'esempio è il seguente

Menù Verticale