HTML + CSS pattern: menù lineare

Questa pagina contiene le istruzioni per la realizzazione di un menù lineare, cioè un elenco di voci disposte in sequenza.

Esempio:

Per realizzare un menù è opportuno utilizzare i marcatori per le liste che sono ul ed li per ogni singolo elemento. Il codice html del menu è il seguente:

<ul class="menuLineare">
    <li>Home</li>
    <li>Prodotti</li>
    <li>Servizi</li>
    <li>Link</li>
    <li>Contatti</li>
</ul>

Mentre il seguente è il codice CSS in modo che il menù diventi lineare:

ul.menuLineare {list-style-type: none; text-align: center; 	
                border-top: solid black 1px; 
                border-bottom: solid black 1px;
                border-left: none;                
                padding: 2em;
                }
ul.menuLineare LI {display:inline; padding: 2em;}

La proprietà display: inline; permette di definire la lista in modo lineare.

Copiando il codice sottostante nella <head> della propria pagina si puo avere un esempio diretto di quanto spiegato


<link type="text/css" rel="stylesheet" 
         href="https://www.asiconline.org/accessibilita/progetti/pattern/menuLineare.css" />

Esempio:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
  <head>
    <title>Gruppo Accessibilità dell'Associazione degli Informatici
    Catanesi: HTML + CSS pattern</title>
    <meta content="Accessibilità, ASIC, usabilità, web content" />
    <meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />
    <link type="text/css" rel="stylesheet" 
             href="https://www.asiconline.org/accessibilita/progetti/pattern/menuLineare.css" />

  </head>

<body>
<ul class="menuLineare">
    <li>Home</li>
    <li>Prodotti</li>
    <li>Servizi</li>    
    <li>Link</li>
    <li>Contatti</li>
</ul>
</body>
</html>

Torna in cima