We discussed how to add horizontal tabs in previous article and in this article we will discuss how to add vertical tabs widget in Weebly site. Similar to horizontal tabs, vertical tabs are also used to add large amount of content within the limited space. The widget is made only with CSS and easy to add on your Weebly site.
How It Looks?
The widget will look something like below:
CSS for Vertical Tabs
Basically the widget contains three parts – full container, vertical navigation labels and the tab content.
- Unordered list is used for navigation with list-style as none and nth-child attribute is used to define five tabs in the vertical menu. You can modify the CSS and add more or less number of tabs as you need.
- Radio input type is used to hide all inactive tab content and highlight the active tab content.
- Navigation section is defined 24% and the tab content is defined as 75% which you can change.
- You can also change the background colors and the hovering color as you need.
Below is the complete CSS for the vertical tabs widget which is to be added under “Header Code” section of your Weebly site.
<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 for the Vertical Tabs Widget
The complete HTML content is covered within a div tag with a “tab-content” class and the content for each five tabs are covered under individual div using “div” class. Replace the content with your own and paste it inside the “Embed Code” element on your Weebly site.
<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>
You can add any type of HTML tags inside each tab content like text, image, video, etc. but ensure to control the width and height of the elements to adjust the display within tab’s content area.
2 Comments
Leave your reply.