TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till vertikal navigeringsmeny på Weebly Site?

0

Att lägga till vertikal navigeringsmeny på Weebly -webbplatsen är ett enkelt sätt att tillhandahålla snabba och användbara länkar till användare. Det kan vara en widget som konsekvent placeras på alla sidor som ett sidofält eller används på specifika sidor var du vill eller används på en blogg sidofält. I den här artikeln kommer vi att förklara steg-för-steg-processen för att lägga till vertikal menywidget till din Weebly-webbplats med undermenyer på flera nivåer. Kom ihåg att texten och svängfärgen kan variera beroende på ditt tema.

  • Navigationsmenywidgeten innehåller enkel CSS- och HTML -kod.
  • Detta är inte en responsiv widget, och använd därför endast flera nivåer om det behövs. Om du är inriktad på mobilanvändare eller bloggens sidofält använder du bara menyn på en nivå som kan passa in i det synliga området.
  • Färg, bredd och höjd på menyn kan anpassas i CSS.
  • Ytterligare meny- eller undermenyalternativ kan läggas till efter behov genom att ändra CSS/HTML.
  • Du kan placera widgeten på så många platser du vill.

Kopiera och klistra in nedanstående CSS -kod under "Sidor> Välj en sida> SEO -inställningar> Rubrikkod ". Om du vill lägga till widgeten på många sidor lägger du till koden under "Tema> Redigera HTML / CSS> Tillgångar> huvud. 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; }

Detta är för tre nivåer av undermenyer och du kan lägga till så många som undermenyer genom replikering 3: e menysektionen i koden.

Lägg till nedanstående HTML -kod i elementet " Bädda in kod " på en sida där du vill lägga till menyn:

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

Ersätt menybeskrivningarna och ta bort # med dina egna länkar. Lägg också till eller ta bort meny- och undermenyalternativ efter behov.

Publicera nu din webbplats för att se en elegant vertikal meny som nedan.

Hur lägger jag till vertikal navigeringsmeny på Weebly Site?

Widget för vertikal navigeringsmeny

Obs! Det kommer att finnas en horisontell rullningslist om det finns ett annat element bredvid menyn som upptar bredden.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer