Здравствуйте! Сегодня хочу предложить вашему вниманию блок с вкладками под категории или другую информацию но я писал их под категории или пункты навигации так же адаптировал их под разные размеры экрана
О материале
Ну что сказать.... Наверное то что он написан в минимальном стиле все картинки серого цвета а сами блоки и кнопки не содержат фона но как обычно всё это легко меняется путём редактирования стилей и выбором других картинок ну и как сказано выше адаптация присутствует ну и то что тут всего три вкладки что бы их увеличить нужно будет тоже менять стили . вообщем хватит писать смотрим скриншоты
Скриншоты
Полный вид блока
Маленький размер
Ну и для тех кому интересен данный блок предлагаю приступить к установки кода
Установка скрипта
Для начала копируем код ниже и размешаем его в то место на странице где хотим видеть блок с категориями
Код
<div class="tabbeds">
<input type="radio" name="tabs_smil" id="tab-navs-1" checked="">
<label for="tab-navs-1" >Жанры</label>
<input type="radio" name="tabs_smil" id="tab-navs-2">
<label for="tab-navs-2">Вкладка 2</label>
<input type="radio" name="tabs_smil" id="tab-navs-3">
<label for="tab-navs-3">Вкладка 3</label>
<div class="tabs_smil" title="">
<!-- Первая вкладка -->
<div class="bckat">
<div class="sslist">
<a href="">
<img src="/img/1k.png">
Экшин
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/2k.png">
Приключения
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/3k.png">
Стратегии
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/4k.png">
Спорт
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/5k.png">
Инди
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/6k.png">
Гонки
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/7k.png">
Казуальные
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/8k.png">
Симуляторы
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/9k.png">
Ролевые
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/10k.png">
Онлайн
</a>
</div>
<div class="clr"></div>
</div>
<!-- Первая вкладка -->
<!-- Вторая вкладка -->
<div class="bckat">
<div class="sslist">
<a href="">
<img src="/img/8k.png">
Симуляторы
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/9k.png">
Ролевые
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/10k.png">
Онлайн
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/1k.png">
Экшин
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/2k.png">
Приключения
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/3k.png">
Стратегии
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/4k.png">
Спорт
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/5k.png">
Инди
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/6k.png">
Гонки
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/7k.png">
Казуальные
</a>
</div>
<div class="clr"></div>
</div>
<!-- Вторая вкладка -->
<!-- Третья вкладка -->
<div class="bckat">
<div class="sslist">
<a href="">
<img src="/img/6k.png">
Гонки
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/7k.png">
Казуальные
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/8k.png">
Симуляторы
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/9k.png">
Ролевые
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/10k.png">
Онлайн
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/1k.png">
Экшин
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/2k.png">
Приключения
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/3k.png">
Стратегии
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/4k.png">
Спорт
</a>
</div>
<div class="sslist">
<a href="">
<img src="/img/5k.png">
Инди
</a>
</div>
<div class="clr"></div>
</div>
<!-- Третья вкладка -->
</div>
</div>
Отлично не забываем сохранить!
Теперь давайте подключим стили блока в вашу таблицу css. Для этого просто копируем код ниже и заходим в админ панель управление дизайном таблица стилей css и в самый её конец добавляем скопированный код
Таблица стилей css
Код
.clr {clear: both;}
.tabbeds {
width: 100%;
color: #989898;
overflow: hidden;
position: relative;
margin: 20px 0;
}
.tabbeds > input {
display: none;
}
.tabbeds > label::before {display: none!important;}
.tabbeds > label {
display: block;
float: left;
padding: 5px 20px;
margin: 5px;
cursor: pointer;
width: auto;
color: #818181;
border: 1px solid #F6F6F6;
}
.tabbeds > label:hover {
border: 1px solid #cad2db;
}
.tabbeds > input:checked + label {
border: 1px solid #000;
color: #000;
}
.tabs_smil {
clear: both;
overflow: hidden;
padding: 20px 0;
}
.tabs_smil > div {
width: 100%;
display: none;
}
#tab-navs-1:checked ~ .tabs_smil > div:nth-of-type(1),
#tab-navs-2:checked ~ .tabs_smil > div:nth-of-type(2),
#tab-navs-3:checked ~ .tabs_smil > div:nth-of-type(3),
#tab-navs-4:checked ~ .tabs_smil > div:nth-of-type(4){
display: block;
}
.bckat {
border-top: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
}
.sslist {
width: calc(20% - 1px);
float: left;
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
}
.sslist a {display: block;color: #000;font-size: 16px;text-align: center;line-height: 50px;padding: 25px 15px 15px;text-decoration: none;}
.sslist img {height: 100px;object-fit: cover;display: block;margin: 0px auto;}
.sslist a:hover {background: #a1c16d;}
@media (max-width: 910px) {
.sslist {width: calc(25% - 1px);}
}
@media (max-width: 780px) {
.sslist {width: calc(33.33% - 1px);}
}
@media (max-width: 600px) {
.sslist {width: calc(50% - 1px);}
}
Отлично не забываем сохранить!
Осталось скачать архив с картинками и загрузить их к себе в файловый менеджер в папку
img хотя если вы не будите использовать картинки те что я использовал в данном примере то и качать нечего не нужно а просто в коде укажите пути к вашим картинкам.
Внимание! Я обнавил архив и добавил в него демо страницу что бы наглядно можно было посмотреть поклацать до установки
Ну и что бы считать установку законченной нам нужно почистить кеш браузера а для этого достаточно нажать комбинацию клавиш
Ctrl+F5 но я думаю что вы это и так знаете!
Будут вопросы проблемы с установкой или что то просто нужно поменять а у вас не получается пишите в комментариях и я вам помогу. Так же просто оставьте пару слов о материале