Come realizzare un menu a discesa orizzontale con il CSS

Tramite: O2O 08/12/2021
Difficoltà: media
19

Introduzione

In informatica viene chiamato CSS (sigla di ?Cascading Style Sheets?, in italiano ?fogli di stile a cascata?) il linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e le relative pagine web. Tramite questo linguaggio informatico è possibile realizzare nella vostra pagina web un menu a discesa orizzontale, per permettere agli utenti una facile interazione con i vostri contenuti. Il procedimento per fare questo è abbastanza facile e in questa guida vi illustreremo come fare.

29

Occorrente

  • Conoscenza del codice "html"
  • Conoscenza del codice "CSS"
39

Accedere al codice HTML

Per prima cosa, al fine di poter programmare in CSS, dovremo accedere al codice HTML (HyperText Markup Language, cioè, in italiano, "Linguaggio a Marcatori per Ipertesti") del sito/pagina web che vogliamo modificare. Per fare questo dovremo andare sulla barra degli strumenti del nostro browser, cliccare su "Visualizza" e poi cliccare, fra le opzioni proposte, su "Origine". In alternativa possiamo cliccare col tasto destro al centro della schermata e selezionare "visualizza sorgente pagina".

49

Modificare il codice HTML

Una volta visualizzato il codice HTML si tratta di passare a modificarlo. Per fare questo non è sufficiente l'operazione sopra descritta ma sono necessari alcuni strumenti informatici che sono a disposizione gratuita di chiunque voglia cimentarsi (vedi fra i link al termine di questo articolo per maggiori dettagli). Sostanzialmente questi strumenti danno la possibilità di digitare all'interno del codice sorgente della pagina, al fine di apportare le modifiche desiderate.

Continua la lettura
59

Inserire il CSS

Passiamo adesso all'inserimento vero e proprio del nostro menu, mediante l'uso del codice CSS, Cascading Style Sheets (ovvero foglio di stile). Andremo ad computare le operazioni che descriviamo sinteticamente: 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;}" (con quest'ultimo comando si ottiene l'effetto di rendere visibile le sole voci del menu, mentre quelle dei sotto-menu appariranno solamente al passaggio del mouse sulla voce principale).

69

Correggere l'allineamento

Per aggiustare l'allineamento degli elementi del menu in caso di problemi relativi al disallineamento (questo tipo di problemi si presentano frequentemente, poiché l'eliminazione della visualizzazione del punto degli elenchi puntati determina un allineamento non corretto del menu che abbiamo realizzato), 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.

79

Modificare i dettagli

A questo punto siete riusciti a realizzare il vostro desiderato menu a discesa orizzontale (Drop Dpwn Menu). Ora potete lavorare sul fine tuning, cioè sui piccoli dettagli, utilizzando le impostazioni a vostra disposizione. Potete infatti modificare molti elementi accessori di dettaglio (che, dal punto di vista estetico, possono fare la differenza), quali ad esempio: la tinta, la tipologia di carattere del testo, la dimensione dei box e così via.

89

Guarda il video

Potrebbe interessarti anche

Naviga con la tastiera

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.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
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 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 installare e configurare Komodo Edit

Per riuscire a creare dei siti internet sono necessarie delle nozioni che consentano di capire i passi da eseguire. Per realizzare il sito poi è essenziale utilizzare programmi che consentono di avere tutto ciò che serve. Komodo Edit è un'eccellente...
Programmazione

Come realizzare un sito usando Java

Con la navigazione in internet si possono visitare di continuo delle serie infinite di siti e pagine. Tanti utenti, per varie necessità, hanno infatti bisogno di realizzare un sito internet. Magari per pubblicizzare la propria attività lavorativa. Oppure...
Programmazione

Come realizzare un testo colorato in Java

Realizzare un testo colorato in Java che sia presente all'interno di una finestra grafica è un'operazione relativamente semplice, ma può risultare complicata per coloro che fanno uso del linguaggio di programmazione in questione per la prima volta....
Programmazione

Come realizzare un database con Excel

Le raccolte di dati, il più delle volte, sono dei lavori davvero impegnativi. Si deve sempre organizzare il tutto in maniera ordinata, altrimenti si crea una confusione enorme. D'altra parte, un archivio è una sorta di raccoglitore in cui vengono conservati...
Programmazione

Come realizzare un'interfaccia grafica in java

Quello della programmazione è un universo nel quale ci si addentra con estrema leggerezza. Sembra si tratti di un procedimento molto semplice, eppure la costruzione di un programma richiede una certa esperienza in fatto di comandi, costrutti, contenitori...
Programmazione

Come realizzare un array list in Java

La classe Arraylist implementa l'interfaccia List ed è basata su una struttura di dati Array. È' ampiamente utilizzato per la funzionalità e la flessibilità che offre. La maggior parte degli sviluppatori sceglie Arraylist su Array poiché è un'ottima...
Programmazione

Bootstrap: cos’è e perché usarlo

Bootstrap nasce nell'anno 2010 per opera degli sviluppatori Mark Otto e Jacob Thornton. Inizialmente si presentava come un progetto interno a Twitter, ma successivamente è diventato indipendente ed è perciò utilizzabile dagli sviluppatori di tutto...