Вкладки (табы) для сайта на html и css

Добро пожаловать! Здесь вы можете узнать о последних обновлениях и решить вопросы касательно использования функционала данного сайта! Перед посещением обязательно ознакомьтесь с правилами форума. Некоторые функции форума доступны только зарегистрированным пользователям.
2 ответ(ов) в теме
Romych
не в сети 1 день
На сайте с 13.03.2021
Модератор
Титул: Элита
100%
Тем 5
Сообщения 26
Подарок автору
1
19:09

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

Данный способ способ построен на радиокнопках (input с type="radio") и CSS селекторе checked.

CSS

Спойлер
/* ---Начало табы (вкладки)--- */
*,
*::before,
*::after {
box-sizing: border-box;
}

.tabs {
font-size: 0;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

.tabs>input[type="radio"] {
display: none;
}

.tabs>div {
/* скрыть контент по умолчанию */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}

/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5,
#tab-btn-6:checked~#content-6,
#tab-btn-7:checked~#content-7,
#tab-btn-8:checked~#content-8,
#tab-btn-9:checked~#content-9,
#tab-btn-10:checked~#content-10 {
display: block;
}

.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
padding: 1px 10px;
border: #ddd 3px groove;
box-shadow: 0 0 10px #e7d7bb inset;
}

.tabs>input[type="radio"]:checked+label {
background-color: #fff;
box-shadow: 0 0 10px #e7bbbb inset;
color: #ee590d;
}
/* ---Конец табы (вкладки)--- */

HTML

Спойлер
<div class="tabs">
    <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
    <label for="tab-btn-1">Шаблоны сайтов</label>
    <input type="radio" name="tab-btn" id="tab-btn-2" value="">
    <label for="tab-btn-2">Вебдизайн и графика</label>
    <input type="radio" name="tab-btn" id="tab-btn-3" value="">
    <label for="tab-btn-3">Инвестиционные игры</label>
    <input type="radio" name="tab-btn" id="tab-btn-4" value="">
    <label for="tab-btn-4">Интернет магазины</label>
    <input type="radio" name="tab-btn" id="tab-btn-5" value="">
    <label for="tab-btn-5">Мониторинги игр</label>
    <input type="radio" name="tab-btn" id="tab-btn-6" value="">
    <label for="tab-btn-6">Буксы (САР)</label>
    <input type="radio" name="tab-btn" id="tab-btn-7" value="">
    <label for="tab-btn-7">Лото и бонусники</label>
    <input type="radio" name="tab-btn" id="tab-btn-8" value="">
    <label for="tab-btn-8">Хайпы и удвоители</label>
    <input type="radio" name="tab-btn" id="tab-btn-9" value="">
    <label for="tab-btn-9">Крипто и майнинг</label>
    <input type="radio" name="tab-btn" id="tab-btn-10" value="">
    <label for="tab-btn-10">Разное</label>

    <div id="content-1">
      Содержимое вкладки: Шаблоны сайтов
    </div>
    <div id="content-2">
      Содержимое вкладки: Вебдизайн и графика
    </div>
    <div id="content-3">
      Содержимое вкладки: Инвестиционные игры
    </div>
    <div id="content-4">
      Содержимое вкладки: Интернет магазины
    </div>
    <div id="content-5">
      Содержимое вкладки: Мониторинги игр
    </div>
    <div id="content-6">
      Содержимое вкладки: Буксы (САР)
    </div>
    <div id="content-7">
      Содержимое вкладки: Лото и бонусники
    </div>
    <div id="content-8">
      Содержимое вкладки: Хайпы и удвоители
    </div>
    <div id="content-9">
      Содержимое вкладки: Крипто и майнинг
    </div>
    <div id="content-10">
      Содержимое вкладки: Разное
    </div>
</div>

Это меню из вкладок для категорий, на примере интернет магазина, но оно может быть приспособлено для чего угодно. Что-бы посмотреть пример данного меню в живую, можно выполнить код в редакторе CodePen

Лучшая благодарность - Like на сообщение!
0
Romych
не в сети 1 день
На сайте с 13.03.2021
Модератор
Титул: Элита
100%
Тем 5
Сообщения 26
Подарок автору
2
01:06

Еще можно таким образом сделать:

CSS

Спойлер
/* Базовый контейнер табов */
.tabs {
min-width: 320px;
max-width: 600px;
padding: 0px;
margin: 0 auto;
}
/* Стили секций с содержанием */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
 /* прикрутим анимацию */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Описываем анимацию свойства opacity */
 
@-webkit-keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
}
/* Прячем чекбоксы */
.tabs>input {
display: none;
position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
vertical-align: middle;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
position: relative;
display: inline-block;
text-align: center;
padding: 1px 10px;
margin: 2px 0px;
border: #ddd 3px groove;
box-shadow: 0 0 10px #e7d7bb inset;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.tabs>label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs>label[for*="1"]:before {
        content: "f19a";
}
.tabs>label[for*="2"]:before {
        content: "f17a";
}
.tabs>label[for*="3"]:before {
        content: "f13b";
}
.tabs>label[for*="4"]:before {
        content: "f13c";
}
.tabs>label[for*="5"]:before {
        content: "f13c";
}
.tabs>label[for*="6"]:before {
        content: "f13c";
}
.tabs>label[for*="7"]:before {
        content: "f06b";
}
.tabs>label[for*="8"]:before {
        content: "f057";
}
.tabs>label[for*="9"]:before {
        content: "f15a";
}
.tabs>label[for*="10"]:before {
        content: "f1b2";
}
/* Изменения стиля переключателей вкладок при наведении */
 
.tabs>label:hover {
        color: #888;
 cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
background: #fff;
line-height: 1.5;
padding: 1px 10px;
border: #ddd 3px groove;
box-shadow: 0 0 10px #e7bbbb inset;
color: #ee590d;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4, #tab5:checked~#content-tab5, #tab6:checked~#content-tab6, #tab7:checked~#content-tab7, #tab8:checked~#content-tab8, #tab9:checked~#content-tab9, #tab10:checked~#content-tab10 {
 display: block;
}
/* Убираем текст с переключателей 
* и оставляем иконки на малых экранах
*/
 
@media screen and (max-width: 680px) {
        .tabs>label {
                font-size: 0;
        }
        .tabs>label:before {
                margin: 0;
                font-size: 18px;
        }
}
/* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
        .tabs>label {
                padding: 15px;
        }
}

HTML

Спойлер
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Вкладка 1">Шаблоны сайтов</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Вкладка 2">Вебдизайн и графика</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Вкладка 3">Инвестиционные игры</label>
 
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="Вкладка 4">Интернет магазины</label>
 
    <input id="tab5" type="radio" name="tabs">
    <label for="tab5" title="Вкладка 5">Мониторинги игр</label>
 
    <input id="tab6" type="radio" name="tabs">
    <label for="tab6" title="Вкладка 6">Буксы (САР)</label>
 
    <input id="tab7" type="radio" name="tabs">
    <label for="tab7" title="Вкладка 7">Лото и бонусники</label>
 
    <input id="tab8" type="radio" name="tabs">
    <label for="tab8" title="Вкладка 8">Хайпы и удвоители</label>
 
    <input id="tab9" type="radio" name="tabs">
    <label for="tab9" title="Вкладка 9">Крипто и майнинг</label>
 
    <input id="tab10" type="radio" name="tabs">
    <label for="tab10" title="Вкладка 10">Разное</label>
 
    <section id="content-tab1">
        <p>
		Содержимое вкладки: Шаблоны сайтов
        </p>
    </section>  
    <section id="content-tab2">
        <p>
		Содержимое вкладки: Вебдизайн и графика
        </p>
    </section> 
    <section id="content-tab3">
        <p>
		Содержимое вкладки: Инвестиционные игры
        </p>
    </section> 
    <section id="content-tab4">
        <p>
		Содержимое вкладки: Интернет магазины
        </p>
    </section> 
    <section id="content-tab5">
        <p>
		Содержимое вкладки: Мониторинги игр
        </p>
    </section> 
    <section id="content-tab6">
        <p>
		Содержимое вкладки: Буксы (САР)
        </p>
    </section> 
    <section id="content-tab7">
        <p>
		Содержимое вкладки: Лото и бонусники
        </p>
    </section>  
    <section id="content-tab8">
        <p>
		Содержимое вкладки: Хайпы и удвоители
        </p>
    </section> 
    <section id="content-tab9">
        <p>
		Содержимое вкладки: Крипто и майнинг
        </p>
    </section> 
    <section id="content-tab10">
        <p>
		Содержимое вкладки: Разное
        </p>
    </section>   
</div>

Иконки добавляем в формате Unicode - отсюда: https://fontawesome.ru/all-icons/

Лучшая благодарность - Like на сообщение!
0
Вы не имеете права на публикацию сообщений в этой теме