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

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

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

Категория Меню
Авторwaak
Просмотры137
Комментарии3
Понравилось8
Скачиваний6

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

О скрипте

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

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

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

Адаптация вида выполнена в 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 и после того как страница обновиться наслаждаться полученным результатом!

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

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

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

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

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

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

waak 07-02-2024 в 18:26

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

dinyslamsinger 23-01-2024 в 16:58

От души

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

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

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

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

Меню

Полезно

Комментарии

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

От души

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

di dinyslamsinger

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

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

waak

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

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

di dinyslamsinger

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