Come creare un menu a discesa?

Molti selezionano su diversi menu a discesa siti. Questo menu rende il tuo sito più funzionale e più intuitivo per l'utente della rete che lo ha visitato. Su come creare un menu a discesa, il nostro articolo lo dirà.

Joomla

Devi andare sul sito del pannello di controllo, quindi nel "Menu", quindi in "Estensioni", quindi in "Moduli di gestione";
Ora devi trovare il modulo che è responsabile per il menu del sito. Può anche essere nel "Module Manager" (un plugin che è responsabile della visualizzazione del menu su questo sito);
Successivamente, è necessario fare clic sul modulo ed eseguire queste impostazioni:
- "Abilitato" - "Sì";
- "Mostra sempre sotto-elementi incorporati" - "Sì";
- "Attiva genitore" - "Sì";
- "Apri il menu" - "Sì";
Salva l'impostazione;
Quindi è necessario andare su "Tutti i menu", quindi "Menu" e selezionare il menu nella lista in cui verrà creato l'elemento con i sottomenu a discesa;
Fai clic sul pulsante "Crea";
Ora è necessario creare voci di menu e quindi sottovoci, per i quali è necessario selezionare i materiali, ovvero un modello di categoria (ad esempio, un collegamento esterno);
Successivamente, è necessario inserire il nome di questo menu eimposta le impostazioni, la principale delle quali è "Elemento genitore" - la voce di menu, da cui verranno fuoriuscite diverse sottovoci, ecco perché è necessario selezionare la voce del menu principale come elemento principale.
Quindi è necessario specificare la categoria a cui sarà collegato il collegamento dell'elemento secondario e salvare l'impostazione

Ecco come creare un menu a discesa per Joomla. Se si desidera creare diversi elementi di questo tipo, è necessario eseguire più volte i passaggi sopra riportati.

HTML e CSS

Per prima cosa devi creare un menu e definirlola sua struttura Quindi è necessario disporre gli elementi in maniera user-friendly e pensare ai nomi corretti e comprensibili delle sezioni future. Ora rimane da determinare quegli elementi che saranno a discesa e i punti secondari necessari che saranno in questi punti;
Successivamente, devi disegnare la struttura selezionata usando i tag html. Sembra qualcosa del genere:
- <Ul>
  <li> <a href="#"> Il tuo riferimento # 1 </a> </ li>
- <li> <a href="#"> Il tuo link n. 2 </a>
  - <Ul>
    <li> <a href="#"> Il tuo articolo numero 2-1 </a> </ li>
  - <li> <a href="#"> Il tuo articolo numero 2-2 </a> </ li>
  - <li> <a href="#"> Il tuo articolo numero 2-3 </a> </ li>
    </ ul> </ li>
- <li> <a href="#"> Il tuo riferimento # 3 </a>
  - <Ul>
    <li> <a href="#"> Il tuo articolo # 3-1 </a> </ li>
  - <li> <a href="#"> Il tuo articolo numero 3-2 </a> </ li>
  - <li> <a href="#"> Il tuo articolo # 3-3 </a> </ li>
  - <li> <a href="#"> Il tuo articolo numero 3-4 </a> </ li>
    </ ul> </ li>
- </ ul>
Quindi devi inserire tutti i tuoi menu nel blocco,designato e impostare l'identificatore (). Ciò ti consentirà di assegnare le tue funzionalità esclusivamente a questo blocco, senza toccare altri blocchi. Nell'identificatore, devi specificare un nome le cui proprietà descrivi nei passaggi successivi;
Ora è necessario creare elenchi che - è la lista stessa, • - è ogni riga e aggiungere per futuri riferimenti che creeranno un menu a discesa, un elenco con le opportune commi;
Successivamente, è necessario convertire i nomi di questi elementi in collegamenti, racchiuderli e assegnarli al parametro "href-address" della pagina desiderata specificata dal collegamento. Ecco come html creare un menu a discesa;
Ora è necessario impostare le proprietà dell'elenco desiderato utilizzando css. Per fare ciò, è necessario aggiungerli al file css come segue:
- #vmenu ul {padding: 0px; margine: 0px; larghezza: 250 px; stile elenco: nessuno;},
dove "padding" è una rientranza all'interno (deve essere"0"), "margine" è un rientro dall'esterno (dovrebbe essere "0"), "stile elenco" è uno stile di elenco (è possibile impostare il valore su "nessuno" per rimuovere i punti), la larghezza è la larghezza dell'elenco;
Quindi è necessario aggiungere le proprietà dell'elemento: #vmenu ul li {position: relative;} è il parametro del posizionamento richiesto (la posizione degli elementi è "posizione"), "relativo" è il valore necessario per determinare la posizione del menu a discesa relativo al menu di avvio. Questo menu sarà verticale;
Successivamente, è necessario specificare le proprietà della lista, che si trova in un elemento di una lista:
- #vmenu li ul {position: absolute; display: nessuno; inizio: 0; a sinistra: 250 px; }
dove "posizione: assoluta "- è occupazione assoluta,«sinistra»e« top sottomenu relativa al menu "- una posizione utilizzando il rientro a sinistra e in alto,« display: none - l'opzione di visualizzazione (inizialmente la lista non verrà pubblicato);
Ora devi inserire i parametri per i tuoi link:
- #vmenu ul li a {padding: 5px; display: blocco; colore: # 606060; decorazione del testo: nessuna; background: # d8d8d8;},
dove "display:block »- questa è un'opzione di visualizzazione che fa un blocco,«imbottitura»elemento - questo trattino,«colore»- è il colore dei link (testo),«di sfondo»- il colore dei link (sfondo),«text-decoration»- questo lo stile del tuo link (in questo caso, il carattere di sottolineatura viene rimosso);
Quindi devi impostare l'azione in caso di passaggio del cursore:
- #vmenu li: hover ul {display: block;},
dove - "li" è la linea della lista, "ul" è la lista che sarà visibile. Ecco come rendere il menu a discesa css;
È anche possibile aggiungere parametri come il parametro dell'immagine oi colori per lo sfondo, il carattere dei collegamenti stessi, le caratteristiche orizzontali e molte altre proprietà per la vista del menu.