Табы (вкладки) для сайта
Сегодня поговорим о вкладках для сайте, другое их название табы. Табы это элемент интерфейса который позволяет переключаться между предварительно разбитым контентом. Табы могут представляться в виде вкладок , кнопок, блоков. Табы предназначены для экономии места. С общим понятием разобрались, теперь давайте перейдём непосредственно к примерам.
Вкладки на чистом CSS
Простой способ построения табов на css, используем радиокнопки (input
с type="radio"
) и CSS селектор checked.
<style>
.tabs {
font-size: 0;
}
.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 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
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;
top: 1px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}
</style>
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Вкладка 1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Вкладка 2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Вкладка 3</label>
<div id="content-1">
Содержимое 1...
</div>
<div id="content-2">
Содержимое 2...
</div>
<div id="content-3">
Содержимое 3...
</div>
</div>
Второй пример отображение табов в виде кнопок:
CSS
.tabs>input[type="radio"] {
display: none;
}
.tabs>input[type="radio"]:checked+label {
background-color: #bdbdbd;
}
.tabs>div {
/* скрыть контент по умолчанию */
display: none;
border: 1px solid #eee;
padding: 10px 15px;
border-radius: 4px;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #eee;
border: 1px solid transparent;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
margin-right: 6px;
cursor: pointer;
margin-bottom: 10px;
}
.tabs>label:first-of-type {
margin-left: 0;
}
HTML
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Вкладка 1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Вкладка 2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Вкладка 3</label>
<div id="content-1">
Содержимое 1...
</div>
<div id="content-2">
Содержимое 2...
</div>
<div id="content-3">
Содержимое 3...
</div>
</div>
Это простые примеры табов, возможно кому и пригодятся
Поддержка браузерами | |||||
---|---|---|---|---|---|
элемент | |||||
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS CSS3 dle DLE fruit farm html html шаблон HTML5 html5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените сайт