Старая форма входа
Вид материаловМенюКатегорииИнформерКнопки
Наш чат 1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Адаптивные вкладки по категории или пунктов меню

Добавлено 22-03-2022 в 21:57

  • Категория Меню
  • Авторwaak
  • Просмотры280
  • Комментарии0
  • Понравилось8
  • Скачиваний10
Адаптивные вкладки по категории или пунктов меню
Здравствуйте! Сегодня хочу предложить вашему вниманию блок с вкладками под категории или другую информацию но я писал их под категории или пункты навигации так же адаптировал их под разные размеры экрана

О материале

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

Скриншоты

Полный вид блока
Маленький размер
Ну и для тех кому интересен данный блок предлагаю приступить к установки кода

Установка скрипта

Для начала копируем код ниже и размешаем его в то место на странице где хотим видеть блок с категориями
Код

  <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 но я думаю что вы это и так знаете!

Будут вопросы проблемы с установкой или что то просто нужно поменять а у вас не получается пишите в комментариях и я вам помогу. Так же просто оставьте пару слов о материале

Скачать файлы материала

10 загрузок 354.7 Kb Скачать
Скачивание файлов без ограничений доступно только зарегистрированным пользователям.

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход
Комментарии
waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал
Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал
web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал
web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код
<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>


А так будет без процентов:
Код
<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>  

25-02-2024 в 23:06 материал
web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал
waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал
ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал
waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал
di dinyslamsinger

От души qv

23-01-2024 в 16:58 материал
di dinyslamsinger

Работает ты лучший брат спасибо

03-01-2024 в 20:10 материал
waak

Для ваших просьб на сайте есть раздел Мастерская туда нужно писать о том что вам нужно а не в комментариях

30-12-2023 в 12:00 материал
di dinyslamsinger


Я уже установил qv

30-12-2023 в 04:26 материал

Услуга от адмиистратора

Вы можите заказать установку от администратара ( waak ) этого материала или любого другога с нашего сайта на ваш сайт или доработку под ваши нужды!

от 150рзаказать