TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać widżet kart pionowych w witrynie Weebly?

0

Omówiliśmy sposób dodawania zakładek poziomych w poprzednim artykule, a w tym artykule omówimy sposób dodawania widżetu zakładek pionowych w witrynie Weebly. Podobnie jak zakładki poziome, zakładki pionowe są również używane do dodawania dużej ilości treści w ograniczonej przestrzeni. Widżet jest tworzony wyłącznie za pomocą CSS i można go łatwo dodać w witrynie Weebly.

Jak to wygląda?

Widget będzie wyglądał mniej więcej tak:

Jak dodać widżet kart pionowych w witrynie Weebly?

Widżet kart pionowych Weebly

CSS dla kart pionowych

Zasadniczo widżet składa się z trzech części – pełnego kontenera, pionowych etykiet nawigacyjnych i zawartości zakładki.

  • Lista nieuporządkowana jest używana do nawigacji w stylu list, ponieważ brak i atrybut nth-child służy do definiowania pięciu zakładek w menu pionowym. Możesz modyfikować CSS i dodawać mniej lub więcej kart, ile potrzebujesz.
  • Typ wejścia radiowego służy do ukrywania całej zawartości nieaktywnych kart i podświetlania zawartości aktywnej karty.
  • Sekcja nawigacji jest zdefiniowana w 24%, a zawartość zakładki w 75%, którą można zmienić.
  • Możesz także zmienić kolory tła i kolor najechania według potrzeb.

Poniżej znajduje się kompletny kod CSS widżetu kart pionowych, który należy dodać w sekcji „Kod nagłówka" w witrynie Weebly.

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

HTML dla widżetu zakładek pionowych

Cała zawartość HTML jest objęta znacznikiem div z klasą „tab-content”, a zawartość każdej z pięciu kart jest objęta indywidualnym elementem div przy użyciu klasy „div”. Zastąp treść własną i wklej ją w elemencie „ Kod do umieszczenia ” na swojej witrynie Weebly.

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

Możesz dodać dowolny typ tagów HTML do zawartości każdej karty, taki jak tekst, obraz, wideo itp., ale upewnij się, że kontrolujesz szerokość i wysokość elementów, aby dostosować wyświetlanie w obszarze zawartości karty.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów