ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивные вкладки с категориями сайта

Адаптивные вкладки с категориями сайта

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

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

Так смотрятся вертикальном положение:

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

Установка:

Первым делом нужно по месту разместить данный код на странице, где хотите видеть эти категории.

HTML

Код

<div class="karkas_stuenue">
  <input type="radio" name="kugsamub" id="tab-navs-1" checked="">
  <label for="tab-navs-1" >Жанры</label>
  <input type="radio" name="kugsamub" id="tab-navs-2">
  <label for="tab-navs-2">Вкладка 2</label>
  <input type="radio" name="kugsamub" id="tab-navs-3">
  <label for="tab-navs-3">Вкладка 3</label>

  <div class="kugsamub" title="">
  
  <div class="peslon">

  <div class="kategoris">
  <a href="">
  <img src="/img/1k.png">
  Экшин
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/2k.png">
  Приключения
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/3k.png">
  Стратегии
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/4k.png">
  Спорт
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/5k.png">
  Инди
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/6k.png">
  Гонки
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/7k.png">
  Казуальные
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/8k.png">
  Симуляторы
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/9k.png">
  Ролевые
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/10k.png">
  Онлайн
  </a>
  </div>
  <div class="clr"></div>
  </div>

  

  

  <div class="peslon">

  <div class="kategoris">
  <a href="">
  <img src="/img/8k.png">
  Симуляторы
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/9k.png">
  Ролевые
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/10k.png">
  Онлайн
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/1k.png">
  Экшин
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/2k.png">
  Приключения
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/3k.png">
  Стратегии
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/4k.png">
  Спорт
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/5k.png">
  Инди
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/6k.png">
  Гонки
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/7k.png">
  Казуальные
  </a>
  </div>

  <div class="clr"></div>
  </div>

  

  

  <div class="peslon">

  <div class="kategoris">
  <a href="">
  <img src="/img/6k.png">
  Гонки
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/7k.png">
  Казуальные
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/8k.png">
  Симуляторы
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/9k.png">
  Ролевые
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/10k.png">
  Онлайн
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/1k.png">
  Экшин
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/2k.png">
  Приключения
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/3k.png">
  Стратегии
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/4k.png">
  Спорт
  </a>
  </div>
  <div class="kategoris">
  <a href="">
  <img src="/img/5k.png">
  Инди
  </a>
  </div>

  <div class="clr"></div>
  </div>
  

  </div>
  </div>

CSS

Код

.clr {clear: both;}
.karkas_stuenue {
  width: 100%;
  color: #989898;
  overflow: hidden;
  position: relative;
  margin: 20px 0;
}

.karkas_stuenue > input {
  display: none;
}
.karkas_stuenue > label::before {display: none!important;}
.karkas_stuenue > label {
  display: block;
  float: left;
  padding: 5px 20px;
  margin: 5px;
  cursor: pointer;
  width: auto;
  color: #818181;
  border: 1px solid #F6F6F6;
}

.karkas_stuenue > label:hover {
  border: 1px solid #cad2db;
}
.karkas_stuenue > input:checked + label {
  border: 1px solid #000;
  color: #000;
}

.kugsamub {
  clear: both;
  overflow: hidden;
  padding: 20px 0;
}

.kugsamub > div {
  width: 100%;
  display: none;
}

#tab-navs-1:checked ~ .kugsamub > div:nth-of-type(1),
#tab-navs-2:checked ~ .kugsamub > div:nth-of-type(2),
#tab-navs-3:checked ~ .kugsamub > div:nth-of-type(3),
#tab-navs-4:checked ~ .kugsamub > div:nth-of-type(4){
  display: block;
}

.peslon {
  border-top: 1px solid #c3c3c3;
  border-left: 1px solid #c3c3c3;
}
.kategoris {
  width: calc(20% - 1px);
  float: left;
  border-right: 1px solid #c3c3c3;
  border-bottom: 1px solid #c3c3c3;

}
.kategoris a {display: block;color: #000;font-size: 16px;text-align: center;line-height: 50px;padding: 25px 15px 15px;text-decoration: none;}
.kategoris img {height: 100px;object-fit: cover;display: block;margin: 0px auto;}
.kategoris a:hover {background: #a1c16d;}

@media (max-width: 910px) {
  .kategoris {width: calc(25% - 1px);}
}
@media (max-width: 780px) {
  .kategoris {width: calc(33.33% - 1px);}
}

@media (max-width: 600px) {
  .kategoris {width: calc(50% - 1px);}
}

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

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

Источник: talantlev.ucoz.ru
Автор: waak

21 Сентября 2022 Загрузок: 4 Просмотров: 1280 Комментариев: (2)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 2
Порядок вывода комментариев: -SAM- 25 Сентября 2022 04:04¹ 0 Статический блок с выводом в табе категорий. Если брать модуль "Онлайн-игры" (stuff), то явно будет получше того, что предоставляет по умолчанию система. Можно добавить динамики, а именно выводить еще количество материалов в категориях. Чтобы был счётчик кол-ва материалов возле ссылок на категории, то нужно для начала в ПУ сайта создать информер^* на категории для выбранного модуля. В его шаблон нужно дописать такое: Код <!--<$CID$>$NUM_DATA$</$CID$>--> Дальше по месту в исходниках вкладки возле ссылки на выбранную категорию нужно поставить такое: Код <?substr($MYINF_x$,strpos($MYINF_x$,'<10>') + 4,strrpos($MYINF_x$,'</10>') - strpos($MYINF_x$,'<10>') - 4)?> Это будет выводить счётчик материалов. В коде "x" - это номер вашего информера из ПУ на категории, "10" - это в качестве примера дан номер категории, а "4" - это количество символов у "<10>" (нужно для правильной подрезки; соответственно, если категория "1" - резать нужно уже 3 символа). Кажется сложным, но если разобраться - всё легко. Вот только придётся для каждой категории прописать в ручную это всё. Не беда, ведь и так ссылки в этом случае таким же образом делаем (хотя нам ничего не мешает прописать нужный код в шаблоне информера, чтобы тянуть еще и $CATEGORY_URL$ с $CATEGORY_NAME$). Это чтобы заменить совсем выводимое системным оператором $CATEGORIES$. Или нужно для того, чтобы сменить порядок ссылок в нём на нужный вам. Кстати, таким же способом можно в меню сайта поставить кол-во материалов (кто ставит ссылки на категории там). *Примечание: этот информер можно выводить еще где-то на сайте, шаблон в нём может быть любым. Количество материалов в нём в исходном коде закомментировано (то есть не видно) - чисто прописали, чтобы получать это всё для нашей вкладки с категориями. Kosten 25 Сентября 2022 23:27² 0 Материал, плюс мануал по теме материала.