TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere il menu di navigazione verticale nel sito Weebly?

21

L’aggiunta di menu di navigazione verticale nel sito Weebly è un modo semplice per fornire collegamenti rapidi e utili agli utenti. Può essere un widget posizionato in modo coerente su tutte le pagine come barra laterale o utilizzato su pagine specifiche dove vuoi o utilizzato su una barra laterale del blog. In questo articolo spiegheremo il processo passo passo per aggiungere il widget del menu verticale al tuo sito Weebly con sottomenu multilivello. Ricorda, il testo e il colore del passaggio del mouse possono variare in base al tema.

  • Il widget del menu di navigazione contiene un semplice codice CSS e HTML.
  • Questo non è un widget reattivo, quindi usa il multilivello solo se necessario. Se ti rivolgi agli utenti mobili o alla barra laterale del blog, utilizza solo un menu a livello singolo che può rientrare nell’area visibile.
  • Il colore, la larghezza e l’altezza del menu possono essere personalizzati nel CSS.
  • È possibile aggiungere ulteriori voci di menu o sottomenu in base alle esigenze modificando CSS/HTML.
  • Puoi posizionare il widget in tutti i posti che desideri.

Copia e incolla il codice CSS sottostante nella sezione "Pagine > Seleziona una pagina > Impostazioni SEO > Codice intestazione ". Se desideri aggiungere il widget su più pagine, aggiungi il codice in "Tema > Modifica HTML/CSS > Risorse > principale. meno".

ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; /*For KHTML*/ list-style: none; } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: 18px/40px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 200px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }

Questo è per tre livelli di sottomenu ed è possibile aggiungere fino a sottomenu replicando la terza sezione del menu nel codice.

Aggiungi il codice HTML sottostante all’interno dell’elemento " Embed Code " su una pagina in cui desideri aggiungere il menu:

<ul id="navmenu"> <li><a href="#">Web Design</a></li> <li><a href="#">Hosting Plans &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">First Site</a></li> <li><a href="#">Second Site</a></li> <li><a href="#">Third Site</a></li> <li><a href="#">Fourth Site</a></li> </ul> </li> <li><a href="#">Weebly</a></li> <li><a href="#">Wix</a></li> </ul> </li> <li><a href="#">Site Builder &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> <li><a href="#">Plan 4</a></li> <li><a href="#">Plan 5</a></li> </ul> </li> <li><a href="#">Weebly &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Email Plans</a></li> <li><a href="#">Site Security</a></li> </ul>

Sostituisci le descrizioni dei menu e rimuovi # con i tuoi link. Inoltre, aggiungi o elimina voci di menu e sottomenu di cui hai bisogno.

Ora pubblica il tuo sito per vedere un elegante menu verticale come di seguito.

Come aggiungere il menu di navigazione verticale nel sito Weebly?

Widget del menu di navigazione verticale

Nota: ci sarà una barra di scorrimento orizzontale se c’è un altro elemento posizionato accanto al menu che occupa la larghezza.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More