Come Creare Un Menu Scorrevole

Sommario:

Come Creare Un Menu Scorrevole
Come Creare Un Menu Scorrevole

Video: Come Creare Un Menu Scorrevole

Video: Come Creare Un Menu Scorrevole
Video: TUTORIAL - Come creare un menu a tendina in HTML5 e CSS3 | FoglioDiStile.Com 2024, Novembre
Anonim

Uno degli aspetti più importanti dello sviluppo di siti Web e software è la creazione di menu. Un bellissimo menu scorrevole rimane un punto di riferimento per molti proprietari di siti Web e programmatori. Questa operazione può essere eseguita utilizzando gli strumenti CSS ed Expression Web.

Come creare un menu scorrevole
Come creare un menu scorrevole

Istruzioni

Passo 1

Apri Expression Web e vai a Gestisci stile per iniziare a creare un menu scorrevole e premi il tasto Nuovo stile. Denominare il nuovo selettore di stile ul li. Assicurati che il file generato abbia l'estensione drop-down.css. Per creare un menu scorrevole, specificare la posizione appropriata sullo schermo. Determina la larghezza di ciascuna delle voci di menu e rimuovi i punti non necessari che potrebbero trovarsi davanti ad esse.

Passo 2

Eseguire l'opzione Layout e impostare l'attributo Display. Dagli un valore Inline appropriato da allineare sullo schermo. Imposta l'attributo Float su Sinistra e premi il tasto Applica. Imposta tutti gli elementi dell'elenco su una riga. Per mantenerli in ordine e non sovrapporsi, imposta l'attributo Larghezza su Posizione sotto forma di 150 px. Assicurati che tutti gli elementi nell'elenco siano della stessa dimensione. Rimuovi i punti davanti a ciascun elemento andando all'attributo Elenco e impostando il tipo di stile elenco su Nessuno. Fare clic su "OK" per accettare le modifiche e rendere effettive.

Passaggio 3

Regola lo stile e la dimensione del carattere per l'ul li. Vai su Gestisci stili e fai clic con il pulsante destro del mouse sull'ul li, scegliendo Modifica stile. Vedrai il menu di dialogo già familiare. Vai su Font, seleziona Font-family e imposta questo attributo su Helvetica, Arial, Sans-serif. Regola la dimensione del carattere e impostalo su 0, 9. Imposta l'attributo di trasformazione del testo su Maiuscolo. Nell'attributo Altezza - Posizione, specificare l'altezza esatta delle voci di menu impostando il valore su 30 px.

Passaggio 4

Salva il file come menu.html quando tutte le azioni correttive sono state completate. Prova il menu che hai appena creato in varie applicazioni e browser per vedere se funziona. Come puoi vedere, non è difficile creare un menu del genere.

Consigliato: