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

Kuinka lisätä pystysuuntaisten välilehtien widget Weebly -sivustoon?

1

Keskustelimme vaakasuuntaisten välilehtien lisäämisestä edellisessä artikkelissa ja tässä artikkelissa keskustelemme vertikaalisten välilehtien widgetin lisäämisestä Weebly -sivustossa. Vaakasuorien välilehtien tapaan pystysuoria välilehtiä käytetään myös suuren määrän sisällön lisäämiseen rajoitetussa tilassa. Widget on tehty vain CSS: llä ja helppo lisätä Weebly -sivustoosi.

Miltä se näyttää?

Widget näyttää seuraavanlaiselta:

Kuinka lisätä pystysuuntaisten välilehtien widget Weebly -sivustoon?

Weebly Vertical Tabs -widget

CSS pystysuorille välilehdille

Widget sisältää pohjimmiltaan kolme osaa – täyden säiliön, pystysuorat navigointitarrat ja välilehden sisällön.

  • Järjestämätöntä luetteloa käytetään navigointiin luettelotyylin kanssa, koska ei mitään ja n: nnen lapsen määritettä käytetään määrittämään viisi välilehteä pystysuorassa valikossa. Voit muokata CSS: ää ja lisätä enemmän tai vähemmän välilehtiä tarpeen mukaan.
  • Radiotulon tyyppiä käytetään piilottamaan kaikki ei -aktiivinen välilehden sisältö ja korostamaan aktiivinen välilehden sisältö.
  • Navigointiosio on määritelty 24% ja välilehden sisältö on määritelty 75%: ksi, jota voit muuttaa.
  • Voit myös muuttaa taustavärejä ja leijuvaa väriä tarpeen mukaan.

Alla on pystysuuntaisten välilehtien widgetin täydellinen CSS, joka lisätään Weebly -sivustosi Otsikkokoodi -osioon.

<style> /* Start of Tab Container */ #tab-container{ position:relative; margin: 20px auto; width: 800px; border-radius: 10px; box-shadow: 1px 1px 5px #aaa; padding: 20px; background:#fff; } /* Start of Navigation Menu */ input[type=radio]{ display:none; } label{ cursor:pointer; padding-left: 20px; line-height: 2; } nav{ position:relative; display:inline-block; width: 24%; } nav ul{ list-style:none; margin:20px 0 0 0; padding:0; } nav ul li{ position:relative; height: 50px; font-size: 20px; padding-top:10px; font-weight:bold; line-height: 30px; border-style:solid; border-width:1px; border-color: gray transparent gray gray; border-radius: 10px 0 0 10px; background: #99CCCC; } nav ul li:hover{ background:#efefef; z-index:1; color: rgb(50, 50, 50); } nav ul li:nth-child(1):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(1)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; top:-10px;right:-1px; } nav ul li:nth-child(1)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; top:-11px;right:0px; border-radius: 0 0 10px 0; box-shadow: 1px 1px 0px gray } nav ul li:nth-child(5):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(5)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; bottom:-10px;right:-1px; } nav ul li:nth-child(5)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; bottom:-11px;right:0px; border-radius: 0 10px 0 0; box-shadow: 1px -1px 0px gray } /* Start of Tab Content */ #tab-content{ position:relative; display:inline-block; background: #e1e1e1; vertical-align:top; border-radius: 10px; width:75%; box-shadow: 0 -1px 4px #aaa; } #tab-content p{ padding: 15px; font-size: 20px; line-height: 30px; } #tab-content .div{ position:relative; display:none; padding: 20px; } /* Define Active Navigation Label and Tab Content */ #tab1:checked~ #tab-content .div:nth-child(1), #tab2:checked~ #tab-content .div:nth-child(2), #tab3:checked~ #tab-content .div:nth-child(3), #tab4:checked~ #tab-content .div:nth-child(4), #tab5:checked~ #tab-content .div:nth-child(5){ display:inline-block; } #tab1:checked~ nav ul li:nth-child(1), #tab2:checked~ nav ul li:nth-child(2), #tab3:checked~ nav ul li:nth-child(3), #tab4:checked~ nav ul li:nth-child(4), #tab5:checked~ nav ul li:nth-child(5){ background:#e1e1e1; z-index:1; } #tab1:checked~ nav ul li:nth-child(1)::before, #tab2:checked~ nav ul li:nth-child(2)::before, #tab3:checked~ nav ul li:nth-child(3)::before, #tab4:checked~ nav ul li:nth-child(4)::before, #tab5:checked~ nav ul li:nth-child(5)::before{ border-color:#e1e1e1; </style>

Pystysuorat välilehdet -widgetin HTML

Koko HTML-sisältö on peitetty div-tunnisteessa, jossa on "tab-content" -luokka, ja jokaisen viiden välilehden sisältö katetaan yksittäisessä div-luokassa käyttämällä div-luokkaa. Korvaa sisältö omalla ja liitä se Weebly -sivustosi " Upota koodi " -elementtiin.

<div id="tab-container"> <!-- Start of Navigation Labels --> <input type="radio" name="check" id="tab1" checked=checked> <input type="radio" name="check" id="tab2"> <input type="radio" name="check" id="tab3"> <input type="radio" name="check" id="tab4"> <input type="radio" name="check" id="tab5"> <nav> <ul> <li><label for="tab1">Tab 1 - Text</label></li> <li><label for="tab2">Tab 2 - Image</label></li> <li><label for="tab3">Tab 3 - Video</label></li> <li><label for="tab4">Tab 4 - Dummy</label></li> <li><label for="tab5">Tab 5 - Dummy</label></li> </ul> </nav> <!-- Start of Tab Content --> <div id="tab-content"> <!-- Content for 1 Tab --> <div class="div"> <h1>Text Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Content for 2 Tab --> <div class="div"> <h1>Image</h1> <img src="https://img.webnots.com/2015/11/parallax1.jpg" width="570" height="400"> </div> <!-- Content for 3 Tab --> <div class="div"> <h1>HTML5 Video</h1> <video width="570" height="400" controls autoplay> <source src="https://img.webnots.com/2015/06/Slider-Video.mp4" type="video/mp4"> </video> </div> <!-- Content for 4 Tab --> <div class="div"> <h1>TAB 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Content for 5 Tab --> <div class="div"> <h1>TAB 5</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>

Voit lisätä minkä tahansa tyyppisiä HTML -tunnisteita jokaisen välilehden sisältöön, kuten tekstiä, kuvaa, videota jne., Mutta muista hallita elementtien leveyttä ja korkeutta säätääksesi välilehden sisältöalueen näyttöä.

Leave A Reply

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