Разработка интернет-магазина на Joomla. Урок №8. Меню каталога

Автор Lyudmila Yeriomenko
Разработка интернет-магазина на Joomla. Урок №8. Меню каталога

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

Трудимся нам нужно создать для начала самой каменю, а для этого по макету — это у нас категории слово магазина из этого можно создать эти категории привязать так заходим джумшопинг компонентов. Жуляны категория и переносим все категории из макет 1 нас идут монитора мы сейчас не будем оставить картинки мы просто создадим эти категории текста варианте без каких-либо описание так смартфоны и так далее, а остальные категория сделайте самостоятельно сейчас просто я покажу принцип, что важно знать важно знать — это каждой категории для создания меню. То есть у нас у мониторов ид-1 у смартфона Fight 2 и так далее начнем создание меню создать новое меню назовем его Left Menu вот так готово и наполним — это меню функция создать никнейм первый пункт у нас монитора выбираем уже тип-топ шопинг категория мониторов мы знаем, что категория — это имеет значение единичка сохраните создать тоже самое для смартфонов смартфона категория категория — это равен значению слова сохранить закрыть дали она нужна вывести этот модуль он нас будет уже иметь значение позиция 3 так.

Киев Так ведь теперь нам остался только вместе если гореть.

То есть у нас уже сама меня есть. Так создать модуль ищем меню есть так Love Me Let меня есть заголовок чик здесь он. Красном пригодится позиция 3 показывать подпункты у нас вложенности не будет из-за этого. Мы — это можем брать сразу так, а показывает на всех страничках показывать уголок. Кстати да заголовок у нас уже будет не такой, а каталог слово каталог есть, что нужно нам ещё нам нужно добавить какой-либо класс для того чтобы мой стилизовать уникальное этот блок суффикс класса модуль. А вот сюда добавим такой класс. Ленд каталог сохранить закрыть посмотрим, что у нас получилось вывелись наше 2 категория ещё. Давайте сразу внесем в следующие изменения в нашей шаблон это. Добавь такой. Градиент нашему блоку так значит давайте перейдем шаблон так и добавить встречу. — это заливка с помощью картинки который будет повторяться по оси X. Давайте вот эту картинку. Кинь в корень нашла шаблона чтобы она работала так заходим в на шаблон не добавляй сюда ношу картиночка смотрим, что получилось так похудела да мы забыли добавить класс. Давайте прыщи здесь найдём класс который может применить — это так значит группа. ВКонтакте подойдёт к 1 имеет 100% экрана ширины вот такие стиле. Всем пока панельку отсюда чтобы не мешалась из посмотрим, что у нас получился природа то есть нас добавился заливка цветом у этого элемента. Давайте стиле первое, что мы видим — это бордюрчик вокруг всего блок. Давайте Добавь в стиле так первое, что нам нужно сделать — это добавить в бордюрчик и если можно заметить — это он нас скругленный по краям снизу тоже. Итак работа в стиле. Мы создали специальный класс для меню чтобы можно было стилизовать — это плохо каталог лифт лифт каталог точнее смотрим. Что нас получился. У нас появился бордюрчик единстве бордюрчик у нас должен быть со всех сторон вот так есть. Давайте теперь оформим. Вот — это слово каталог — это у нас H3 каталог H3 есть и он содержит в себе стиль и опять же линейный. Градиент поединки радиус и так далее есть оформлена и теперь нам остается оформить. Только наши пункты меню так они у нас уже левой части обычно. Уэльс по настройкам имеет padding сейчас у нас уже оформлен. Как нам нужно так давайте оформлять штукатурка по сути нам нужно форме только ссылочки то есть ссылки. А вот эти аниме Border снизу цвет отличной от всех остальных этой серой и построй поединки и гарнитура шрифта каталог. А вот так посмотрим, что у нас получилось всё. Остаётся только сделать активный вариант. То есть у нас по активному варианту не будет добавление вот этого серого. Градиент на. Серова единстве нас будет изменение цвета цвета на оранжевой как — это сделать так и Hover есть смотрим, что получилось забыли ещё убрать vagrant есть и то же самое сделаем ещё и. Для активного блока взяли. А — это будет ли. липочка и без ховера есть смотрим. Вот для чего — это нужно допустим перевод смартфона и немного должны уже быть подсвечник себя то, что мы находимся в этом пункте вида смартфона так сменю. Мы закончили в следующем уроке мы займёмся давайте займемся доставкой и если успеем тоже. Снайпер До встречи.

0 комментариев
0

Читайте также