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

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...