TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä pystysuora navigointivalikko Weebly -sivustoon?

7

Vertikaalisen navigointivalikon lisääminen Weebly -sivustoon on helppo tapa tarjota nopeita ja hyödyllisiä linkkejä käyttäjille. Se voi olla widget, joka on johdonmukaisesti sijoitettu kaikille sivuille sivupalkiksi tai jota voidaan käyttää tietyillä sivuilla missä haluat tai käyttää blogin sivupalkissa. Tässä artikkelissa kerromme vaihe vaiheelta, kuinka pystysuora valikko-widget lisätään Weebly-sivustoosi monitasoisilla alivalikoilla. Muista, että teksti ja hiiren väri voivat vaihdella teemasi mukaan.

  • Navigointivalikko -widget sisältää yksinkertaisen CSS- ja HTML -koodin.
  • Tämä ei ole reagoiva widget, joten käytä monitasoista vain tarvittaessa. Jos kohdistat mobiilikäyttäjille tai blogin sivupalkille, käytä vain yhden tason valikkoa, joka mahtuu näkyvälle alueelle.
  • Valikon väri, leveys ja korkeus voidaan mukauttaa CSS: ssä.
  • Muita valikon tai alivalikon kohteita voidaan lisätä tarpeen mukaan muokkaamalla CSS/HTML-koodia.
  • Voit sijoittaa widgetin niin moneen paikkaan kuin haluat.

Kopioi ja liitä alla oleva CSS -koodi Sivut> Valitse sivu> SEO -asetukset> Otsikkokoodi -osioon. Jos haluat lisätä widgetin monille sivuille, lisää koodi kohtaan Teema> Muokkaa HTML / CSS> Omaisuus> pää. Vähemmän".

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

Tämä koskee kolmea alivalikkoa ja voit lisätä niinkin monta kuin alivalikkoa replikoimalla koodin kolmannen valikon osan.

Lisää alla oleva HTML -koodi Upota koodi -elementtiin sivulle, jolle haluat lisätä valikon:

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

Korvaa valikkojen kuvaukset ja poista # omilla linkeilläsi. Voit myös lisätä tai poistaa valikon ja alivalikon kohteita tarpeen mukaan.

Julkaise nyt sivustosi nähdäksesi tyylikkään pystysuoran valikon, kuten alla.

Kuinka lisätä pystysuora navigointivalikko Weebly -sivustoon?

Pystysuoran navigointivalikon widget

Huomautus: Vaakasuuntainen vierityspalkki tulee näkyviin, jos valikon viereen on sijoitettu toinen elementti, joka vie leveyden.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja