Uno degli aspetti più importanti nello sviluppo di software e siti Web è la creazione di menu. Microsoft e la sua idea più famosa, il sistema operativo Windows, dovrebbero essere presi come un ottimo esempio. Nonostante il fatto che questo prodotto sia utilizzato dalla stragrande maggioranza degli utenti di PC nel mondo, le critiche non solo non diminuiscono, ma sono in costante crescita. Fondamentalmente, riguarda l'inconveniente della posizione delle voci di menu. Quella che segue è una descrizione di come creare menu in CSS ed Expression Web.
Istruzioni
Passo 1
Per iniziare a creare un menu orizzontale, vai su Gestisci stile, quindi fai clic sul pulsante Nuovo stile. Denominare il nuovo selettore di stile ul li. Importante! Assicurati che il file generato abbia l'estensione drop-down.css. Per creare un menu orizzontale, indicare all'elemento creato che sarà esattamente orizzontale. Quindi, determina la larghezza di ciascuna voce di menu e rimuovi tutti i punti non necessari posizionati davanti a tutti gli elementi nell'elenco.
Passo 2
Vai all'opzione Layout, imposta l'attributo Display su Inline per eseguire l'allineamento orizzontale. Quindi, imposta il valore Left sull'attributo Float e fai clic sul pulsante Applica. Imposta tutti gli elementi dell'elenco su una riga. In modo che siano posizionati ordinatamente e non strisciano uno sopra l'altro, nell'attributo Larghezza, imposta il valore Posizione su 150 px. Verifica che tutti gli elementi dell'elenco abbiano la stessa dimensione. Quindi, rimuovi i punti davanti a tutti gli elementi: per questo, vai all'attributo List e imposta il parametro Nessuno nella voce List Style-type. Fare clic su OK per accettare e applicare tutte le modifiche.
Passaggio 3
Regola la dimensione e lo stile del carattere per l'ul li. Per fare ciò, vai su Gestisci stili e fai clic con il pulsante destro del mouse su ul li, quindi seleziona Modifica stile. Apparirà la familiare finestra di dialogo. Vai su Font, seleziona l'attributo Font-family e impostalo su Sans-serif, Arial, Helvetica. Quindi, regola la dimensione del carattere impostandolo su 0, 9. Successivamente, imposta l'attributo Text-transform su Maiuscolo. Regola l'altezza delle voci di menu nell'attributo Altezza - Posizione, impostando il valore su 30 px.
Passaggio 4
Dopo aver completato tutte le azioni correttive, salva il file come menu.html. Quindi, prova il menu creato in diversi browser per assicurarti che funzioni correttamente. Come puoi vedere, il design del menu orizzontale è abbastanza semplice.
