Главная / Каталог скриптов для uCoz / Меню

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

Добавлено 21-01-2024 в 21:09

Категория Меню
Авторwaak
Просмотры455
Комментарии5
Понравилось12
Скачиваний29

Здравствуйте! сегодня у меня для вас простенький скрипт Вид категорий с картинками который я верстал по просьбе пользователя и так как данная работа была мной выполнена бесплатной то естественно она должна быть на сайте и доступна для всех желающих

О скрипте

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

картинки в данном варианте подобраны под тематику доска объявлений но если поменять название и естественно картинки то и тематика естественно поменяется а значит подойдёт для любого сайта

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

Адаптация вида выполнена в 4 этапа более подробнее описано ниже а так же для наглядности смотрите скриншоты

Скриншоты

первый полный вид в 2 ряда по 7 категорий

второй в 5 рядов по 3 категории

третий в 7 рядов по 2 категории

Ну и последний четвёртый все категории вертикально по 1

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

Установка

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

Код

<div class="katwaakbc">
  <a class="katwaakbclist katwaakbc3" href="">
  <div>
  <article>
  <p class="">Авто</p>
  </article>
  </div>
  <img src="/img/cat_1.png">
  </a>

  <a class="katwaakbclist katwaakbc2" href="">
  <div>
  <article>
  <p class="">Недвижи -
  мость</p>
  </article>
  </div>
  <img src="/img/cat_2.png">
  </a>

  <a class="katwaakbclist katwaakbc2" href="">
  <div>
  <article>
  <p class="">Работа</p>
  </article>
  </div>
  <img src="/img/cat_3.png">
  </a>

  <a class="katwaakbclist katwaakbc3" href="">
  <div>
  <article>
  <p class="">Одежда, обувь,
аксессуары</p>
  </article>
  </div>
  <img src="/img/cat_4.png">
  </a>

  <a class="katwaakbclist katwaakbc2" href="">
  <div>
  <article>
  <p>Хобби
и отдых</p>
  </article>
  </div>
  <img src="/img/cat_5.png">
  </a>

<a class="katwaakbclist katwaakbc2" href="">
  <div>
  <article>
  <p>Животные</p>
  </article>
  </div>
  <img src="/img/cat_6.png">
</a>

<a class="katwaakbclist katwaakbc3" href="">
  <div>
  <article>
  <p>Готовый бизнес
и оборудование</p>
  </article>
  </div>
  <img src="/img/cat_7.png">
</a>

<a class="katwaakbclist katwaakbc2" href="">
  <div>
  <article>
  <p>Услуги</p>
  </article>
  </div>
  <img src="/img/cat_8.png">
</a>

<a class="katwaakbclist katwaakbc2" href="/krasnodar/bytovaya_elektronika">
  <div>
  <article>
  <p>Электро-
ника</p>
  </article>
  </div>
  <img src="/img/cat_9.png">
</a>

<a class="katwaakbclist katwaakbc2" href="/">
  <div>
  <article>
  <p>Для дома
и дачи</p>
  </article>
  </div>
  <img src="/img/cat_10.png">
</a>

<a class="katwaakbclist katwaakbc2" href="/krasnodar/zapchasti_i_aksessuary">
  <div>
  <article>
  <p>Запчасти</p>
  </article>
  </div>
  <img src="/img/cat_11.png">
</a>

<a class="katwaakbclist katwaakbc3" href="">
  <div>
  <article>
  <p>Товары
для детей</p>
  </article>
  </div>
  <img src="/img/cat_12.png">
</a>

<a class="katwaakbclist katwaakbc3 katwaakbc4" href="">
  <div>
  <article>
  <p>Жильё
посуточно</p>
  </article>
  </div>
  <img src="/img/cat_13.png">
</a>

<a class="katwaakbclist katwaakbc3 katwaakbc4" href="">
  <div>
  <article>
  <p>Красота
и здоровье</p>
  </article>
  </div>
  <img src="/img/cat_14.png">
</a>

</div>

Отлично не забываем сохранить!

Внимание ссылки на категории вам нужно будет указать самостоятельно по этому не забывайте об этом иначе переход не будет работать!

Отлично теперь давайте подключим стили нашего блока с категориями а для этого нам нужно просто копировать код ниже и добавить его в свою таблицу стилей в самый её конец

Код

.katwaakbc {
  --columns: 17;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(var(--columns), [col] 1fr);
  grid-template-rows: repeat(2, [row] 90px);
  background: #FFF;
  padding: 20px;
}

.katwaakbc .katwaakbclist {
  background: #f2f1f0;
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
}

.katwaakbc .katwaakbclist:hover {
  background: #ebeae8;
}
.katwaakbc p {
  white-space: pre-wrap;
}

.katwaakbc img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  height: 100%;
}

.katwaakbc3 {
  grid-column: span 3;
}

.katwaakbc2 {
  grid-column: span 2;
}

@media screen and (max-width: 900px){
.katwaakbc { --columns: 18;grid-template-rows: repeat(5, [row] 90px);}
.katwaakbc3 {grid-column: span 8;}
.katwaakbc2 {grid-column: span 5;}
.katwaakbc4 {grid-column: span 9;}

}
@media screen and (max-width: 600px){
.katwaakbc { --columns: 18;grid-template-rows: repeat(7, [row] 90px);}
.katwaakbc3 {grid-column: span 9;}
.katwaakbc2 {grid-column: span 9;}
.katwaakbc4 {grid-column: span 9;}

}
@media screen and (max-width: 400px){
.katwaakbc { --columns: 1;grid-template-rows: repeat(14, [row] 90px);}
.katwaakbc3 {grid-column: span 1;}
.katwaakbc2 {grid-column: span 1;}
.katwaakbc4 {grid-column: span 1;}

}

Отлично не забываем сохранить!

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

Отлично теперь нам осталось почистить кеш браузера а для этого нужно просто использовать комбинацией клавиш Ctrl+F5 и после того как страница обновиться наслаждаться полученным результатом!

Если вдруг у вас что то не получилось или же вам нужна помощь в настройке переделки ну или просто хочется высказать своё мнение пишите в комментариях

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

29 загрузок 102.0 Kb Скачать

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

ВОЙТИ РЕГИСТРАЦИЯ

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

waak 07-02-2024 в 18:26

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

dinyslamsinger 23-01-2024 в 16:58

От души

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

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

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js

19-05-2025 в 17:16 материал

waak

напишите сайт я посмотрю так как данный скрипт стоит у меня на сайте и работает отлично! или скиньте доступ к панели я сам вам поставлю его!

13-04-2025 в 17:56 материал

pa patali2k

Добрый вечер, не работает, при нажатии на кнопку "в закладки" всплывает маленькая окно загрузка и так и стоит грузит бесконечно

13-04-2025 в 01:45 материал

ch chirianovconstantin

Спасибо буду ждать

18-02-2025 в 23:03 материал

waak

Здравствуйте сейчас нет времени на это но чуть позже сделаю выложу на сайт