Как добавить виджет вертикальных вкладок на сайт Weebly?

Мы обсуждали, как добавить горизонтальные вкладки в предыдущей статье, а в этой статье мы обсудим, как добавить виджет вертикальных вкладок на сайт Weebly. Подобно горизонтальным вкладкам, вертикальные вкладки также используются для добавления большого количества контента в ограниченное пространство. Виджет создан только с использованием CSS, и его легко добавить на ваш сайт Weebly.

Виджет будет выглядеть примерно так:

Виджет вертикальных вкладок Weebly

Посмотреть живую демонстрацию

CSS для вертикальных вкладок

В основном виджет состоит из трех частей – полного контейнера, меток вертикальной навигации и содержимого вкладки.

  • Неупорядоченный список используется для навигации со стилем списка как none, а атрибут nth-child используется для определения пяти вкладок в вертикальном меню. Вы можете изменить CSS и добавить большее или меньшее количество вкладок по мере необходимости.
  • Тип радиовхода используется для скрытия всего неактивного содержимого вкладки и выделения активного содержимого вкладки.
  • Раздел навигации определен на 24%, а содержание вкладки – на 75%, которое вы можете изменить.
  • Вы также можете изменить цвета фона и цвет при наведении курсора по своему усмотрению.

Ниже приведен полный код CSS для виджета с вертикальными вкладками, который нужно добавить в раздел «Код заголовка» вашего сайта 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 для виджета вертикальных вкладок

Полное HTML-содержимое покрывается тегом div с классом «tab-content», а содержимое каждой пяти вкладок покрывается отдельным div с использованием класса «div». Замените контент своим собственным и вставьте его в элемент «Вставить код» на своем сайте Weebly.

<div id="tab-container">

<!-- Start of Navigation Labels&nbsp;-->
<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&nbsp;-->

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

Вы можете добавить любой тип HTML-тегов в содержимое каждой вкладки, например текст, изображение, видео и т. Д., Но убедитесь, что вы контролируете ширину и высоту элементов, чтобы настроить отображение в области содержимого вкладки.

Посмотреть живую демонстрацию

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *