Come realizzare un menu a discesa orizzontale con il CSS

Tramite: O2O 20/04/2015
Difficoltà: media
17

Introduzione

Nella seguente pratica e rapida guida che vi esplicherò nei passaggi successivi, vi spiegherò specificatamente come si deve realizzare un menu a discesa orizzontale, soltanto utilizzando il foglio di stile (CSS) per il vostro bellissimo sito internet. L'esempio che vi illustrerò a breve è abbastanza semplice da comprendere e quasi banale, ma vi permetterà di arricchirlo facilmente rendendolo veramente unico; inoltre, esso non prevede i dettagli relativi alla forma del menù: lo stile del testo ed i colori non vengono trattati per potervi consentire di personalizzarlo a vostro piacere!!!

27

Occorrente

  • Conoscenza del codice "html"
  • Conoscenza del codice "CSS"
37

Innanzitutto, cominciamo immediatamente nel vedere il codice html (HyperText Markup Language) relativo alle voci del menù principale ed a quelle dei sottomenù riguardanti ciascuna voce sempre del menù basilare: precisamente, quest'ultimo sarà costituito semplicemente da elenchi puntati (come, ad esempio, "Gelati Frutta Creme Torte Paradiso Tiramisù Sbriciolata").

47

Successivamente, con riferimento ai dettagli del vostro Cascading Style Sheets (ovvero foglio di stile), le facili operazioni che dovrete compiere sono le seguenti: inserire, nel "CSS", il codice html "#menu, #menu ul{ list-style: none ;}" (per eliminare il punto agli elenchi puntati) e "#menu ul{ display: none ; position: absolute;}" (per rendere invisibili i sottomenù); introdurre, sempre nel "CSS", la regola "#menu li: hover ul{ display: block;}" (per rendere visibile un sottomenù soltanto quando con il mouse passate sulla rispettiva voce del menù principale.

Continua la lettura
57

Per poter effettuare la correzione dei problemi di disposizione in linea (che saranno sicuramente esistenti, poiché l'eliminazione della visualizzazione del punto degli elenchi puntati determina un allineamento non corretto per il vostro obiettivo), nel foglio di stile, sarete obbligati ad inserire le regole "#menu li{ float: left; position: relative; width:120px;}" e "#menù ul li{ float: none;}": esse vi serviranno appunto per allineare a sinistra solamente le voci del menù principale.

67

Cosi facendo, il vostro menù avrà acquistato le caratteristiche fondamentali di un comune menù a discesa orizzontale. Arrivati a questo punto, avrete la possibilità di divertirvi ad arricchire quest'ultimo con tutti i dettagli stilistici che preferite, tra cui i seguenti: il colore di sfondo delle svariate voci presenti (anche dei sottomenù); la tinta e la tipologia di carattere del testo; la dimensione dei box.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Gli errori più comuni su CSS

Il linguaggio CSS (Cascading Style Sheets) si usa essenzialmente per la creazione di un sito web. Insieme all'HTML e al Javascript, formano una pagina web in tutto e per tutto. Il CSS, in particolare, si occupa di tutti quegli aspetti che vanno a comporre...
Programmazione

CSS: 10 cose da sapere

CSS è la sigla che sta per Cascading Style Sheets, ovvero i fogli di stile a cascata che servono per la gestione del layout di un sito web. Grazie ad essi è possibile interagire sugli aspetti visuali delle pagine, controllandone tutti gli elementi grafici....
Programmazione

Come cambiare un attributo CSS tramite JavaScript

In ambito informatico sono esistiti - ed esistono tutt'ora - molti linguaggi di programmazione per il web. Sebbene nessuno di essi sia davvero facile da apprendere, alcuni sono più intuitivi di altri e si prestano meglio allo sviluppo di contenuti interattivi...
Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte allo stile delle tue pagine web? Leggi questa guida e scopri come farlo usando jQuery Custom Scrollbar....
Programmazione

Come realizzare un programma di archiviazione

L' archiviazione di dati è, se vogliamo, la prima funzione per cui sono stati progettati i computer, per questo uno dei primi lavori che i programmatori si sono visto commissionare è appunto la creazione di programmi con funzione di archivio dati. Vi...
Programmazione

Come realizzare un finestra modale con jQuery

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare sulla finestra “padre”. Nella progettazione delle interfacce, le finestre modali...
Programmazione

Come installare Bootstrap 4

Bootstrap è il framework di sviluppo front-end più popolare al mondo e la sua ascesa è in costante aumento. Nel corso degli anni si è tuttavia evoluto, ed oggi la versione 4 rappresenta il top di questa funzionale applicazione web. Inoltre va aggiunto...
Programmazione

Come realizzare animazioni con JavaScript

Tra i linguaggi di scripting esistenti Javascrispt è quello tutt'oggi utilizzato anche se superato da altri più moderni. Questo linguaggio si basa su una sintassi Java, ma esso è reso più semplice e diretto in quanto svolge il codice script riga dopo...