Come Creare Un Menu A Discesa Verticale

Sommario:

Come Creare Un Menu A Discesa Verticale
Come Creare Un Menu A Discesa Verticale

Video: Come Creare Un Menu A Discesa Verticale

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

Il menu a discesa verticale è molto utile: consente di risparmiare spazio sulla pagina Web, mentre allo stesso tempo aiuta a navigare facilmente nel sito. Prova a creare un menu a discesa basato su CSS - Fogli di stile a cascata. Se non sei ancora un esperto nella creazione di codice CSS, utilizza il servizio purecssmenu.com. Ti viene richiesto di selezionare un tipo di menu, personalizzarne l'aspetto e quindi adattarlo al tuo sito. Il servizio stesso genererà il codice necessario, che poi inserirai nei file del tuo sito.

Come creare un menu a discesa verticale
Come creare un menu a discesa verticale

Istruzioni

Passo 1

Registrati al sito purecssmenu.com, altrimenti non potrai scaricare il menu creato. Fare clic sul pulsante Modelli sul lato sinistro della pagina. Sotto vedrai diverse piccole finestre con modelli di menu a discesa, facendo clic su cui verrà caricata un'anteprima a destra nella finestra Anteprima. Scegli un modello adatto al tuo sito

Passo 2

Personalizza il carattere e il colore del menu: utilizza la scheda Parametri. Nel campo Carattere, seleziona un carattere, la dimensione del carattere, se necessario, sottolineato e grassetto. Nel campo Colori, imposta lo sfondo del menu, il colore del carattere e i colori al passaggio del mouse del carattere e dello sfondo

Passaggio 3

Apri la scheda Elementi per gestire le voci di menu. Se si fa clic sul pulsante Cancella cestino, gli articoli campione vengono cancellati ed è possibile crearne uno personalizzato. Per fare ciò, premi il pulsante Aggiungi elemento più: l'elemento verrà aggiunto alla fine del menu. Il pulsante Aggiungi elemento successivo viene utilizzato per aggiungere un elemento dopo l'ora attualmente selezionata. Il pulsante Aggiungi sottoelemento crea una voce di sottomenu per la selezione. Di conseguenza, per rimuovere un elemento, utilizzare il pulsante Rimuovi elemento

Passaggio 4

Prestare attenzione al campo Parametri articolo nella parte inferiore del sito. Nella riga Testo, specificare il nome della voce di menu, nella riga Collegamento - l'URL della pagina a cui porterà questa voce. Nella riga Suggerimento, puoi lasciare una descrizione dell'articolo, che verrà mostrata quando passi con il mouse sul link. La riga Target viene utilizzata per determinare il modo in cui aprire la pagina a cui conduce il collegamento. Il parametro _self su questa riga apre la pagina nella stessa finestra del browser di quella corrente

Passaggio 5

Dopo aver terminato la configurazione del menu, scaricalo - fai clic sul pulsante Download in basso a destra nella pagina (questa funzione è disponibile dopo la registrazione al sito). Seleziona una cartella sul disco rigido in cui verrà salvato il file di archivio. Disimballarlo. Dovrai copiare il codice richiesto dal file purecssmenu.html nel file modello CSS del tuo sito. Apri il file purecssmenu.html con un editor di testo e copia il codice tra i tag e nel modello CSS del tuo sito (questo file ha un'estensione.css e assomiglia a file.css). Ora incolla il codice nel file del modello del tuo sito (temi): il codice da purecssmenu.html tra i commenti e invece del normale codice del menu. Per fare ciò, è necessario avere almeno un po' di familiarità con la programmazione. Assicurati di incollare il codice nel file corretto e salva.

Consigliato: