TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere il widget delle schede verticali nel sito Weebly?

8

Abbiamo discusso su come aggiungere schede orizzontali nell’articolo precedente e in questo articolo discuteremo come aggiungere widget di schede verticali nel sito Weebly. Simile alle schede orizzontali, anche le schede verticali vengono utilizzate per aggiungere una grande quantità di contenuto all’interno dello spazio limitato. Il widget è realizzato solo con CSS ed è facile da aggiungere al tuo sito Weebly.

Come appare?

Il widget avrà un aspetto simile al seguente:

Come aggiungere il widget delle schede verticali nel sito Weebly?

Widget Schede verticali Weebly

CSS per schede verticali

Fondamentalmente il widget contiene tre parti: contenitore completo, etichette di navigazione verticale e contenuto della scheda.

  • L’elenco non ordinato viene utilizzato per la navigazione con stile elenco poiché none e l’attributo nth-child viene utilizzato per definire cinque schede nel menu verticale. Puoi modificare il CSS e aggiungere più o meno il numero di schede di cui hai bisogno.
  • Il tipo di ingresso radio viene utilizzato per nascondere tutto il contenuto della scheda inattiva ed evidenziare il contenuto della scheda attiva.
  • La sezione di navigazione è definita al 24% e il contenuto della scheda è definito al 75% che è possibile modificare.
  • Puoi anche cambiare i colori di sfondo e il colore in bilico di cui hai bisogno.

Di seguito è riportato il CSS completo per il widget delle schede verticali che deve essere aggiunto nella sezione "Codice intestazione" del tuo sito 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 per il widget Schede verticali

Il contenuto HTML completo è coperto da un tag div con una classe "tab-content" e il contenuto per ogni cinque schede è coperto da un div individuale utilizzando la classe "div". Sostituisci il contenuto con il tuo e incollalo all’interno dell’elemento " Embed Code " sul tuo sito 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>

Puoi aggiungere qualsiasi tipo di tag HTML all’interno di ogni contenuto della scheda come testo, immagine, video, ecc., ma assicurati di controllare la larghezza e l’altezza degli elementi per regolare la visualizzazione all’interno dell’area del contenuto della scheda.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More