TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til vertikal navigasjonsmeny på Weebly Site?

1

Å legge til vertikal navigasjonsmeny på Weebly -nettstedet er en enkel måte å gi raske og nyttige lenker til brukerne. Det kan være en widget som konsekvent plasseres på alle sider som et sidefelt eller brukes på bestemte sider hvor du vil eller brukes på en blogg -sidefelt. I denne artikkelen vil vi forklare trinnvis prosessen med å legge til vertikal meny-widget på Weebly-nettstedet med undermenyer på flere nivåer. Husk at tekst og hoverfarge kan variere basert på temaet ditt.

  • Navigasjonsmeny -widgeten inneholder enkel CSS- og HTML -kode.
  • Dette er ikke en responsiv widget, så bruk bare flernivå hvis det er nødvendig. Hvis du er rettet mot mobilbrukere eller sidelinjen på bloggen, kan du bare bruke menyen på ett nivå som kan passe inn i det synlige området.
  • Fargen, bredden og høyden på menyen kan tilpasses i CSS.
  • Flere meny- eller undermenyelementer kan legges til etter behov ved å endre CSS/HTML.
  • Du kan plassere widgeten på så mange steder du vil.

Kopier og lim inn CSS -koden nedenfor under "Sider> Velg en side> SEO -innstillinger> Overskriftskode ". Hvis du vil legge til widgeten på mange sider, legger du til koden under "Tema> Rediger HTML / CSS> Eiendeler> hoved. mindre".

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; }

Dette er for tre nivåer i undermenyer, og du kan legge til så mange som undermenyer ved å replikere tredje menyseksjon i koden.

Legg til HTML -koden nedenfor i " Embed Code " -elementet på en side der du vil legge til menyen:

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

Erstatt menybeskrivelsene og fjern # med dine egne lenker. Legg også til eller slett meny- og undermenyelementer etter behov.

Publiser nå nettstedet ditt for å se en elegant vertikal meny som nedenfor.

Hvordan legge til vertikal navigasjonsmeny på Weebly Site?

Widget for vertikal navigasjonsmeny

Merk: Det vil være en horisontal rullefelt hvis det er et annet element plassert ved siden av menyen som opptar bredden.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon