Come realizzare un menu a discesa orizzontale con il CSS

tramite: O2O
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.

77

Consigli

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

Come usare gli icon fonts con i CSS

Web designer e sviluppatori utilizzano i file css per determinare lo stile delle pagine web e delle loro creazioni. Con l'avvento del css3 e con font sempre più moderni, è possibile effettuare maggiori personalizzazioni anche innovative, utilizzando...
Programmazione

Come utilizzare CSS3

Ora è d'obbligo avere una conoscenza dei termini per poter usare il nostro computer in maniera adeguata, necessario ed utile per essere pronti ed al passo con i tempi, i vocaboli sono tanti alcune volte è difficile capirne il significato anche perché...
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

Realizzare giochi flash con StencylWorks

StencylWorks è un software per la realizzazione di giochi flash gratuiti e dalle prestazioni non troppo elevate. Potrai pubblicare i tuoi giochi in versione Flash o mobile per Android o iPhone. Le tue creazioni diventeranno "monetizzabili", cioè in...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.