Цель урока Обзор задач, решаемых с помощью главного меню в интернет магазине. Создание своего меню, размещение его в глобальных блоках, а также изменение стилей. Каким должно быть меню интернет магазинаОбычно для интернет магазина используется два типа меню: основное меню и меню категорий. Основное меню решает вопрос навигации по сайту (исключая каталог) и может содержать ссылка на: главную, страницу со списком способов доставки/оплаты, помощь по сайту, отзывы, прочие информационные материалы, новости, статьи, обзоры. Меню категорий решает вопрос навигации по каталогу и может содержать ссылки на основные и вложенные категории и виртуальные категории "Новинки", "Бестселлеры", "Спецпредложения".
Еще несколько правил хорошего тона для меню:
Это мои рекомендации, если осознаёте, что делаете, можно им четко не следовать. Обзор конструктора меню uCozЧтобы начать пользоваться конструктором меню, перейдите в Панель управления - Дизайн - Конструктор меню:
Появится интерфейс для взаимодействия с меню сайта:
Рассмотрим процесс создания горизонтального меню с самого начала. Для этого откроем селектор созданных ранее меню и выберем пункт "Создать меню". Откроется форма создания меню:
Введем название для нашего нового меню, выберем способ отображения "горизонтальный" и нажмем кнопку "Сохранить". Откроется такая форма:
Чтобы добавить пункт меню, нажмите соответствующую кнопку, откроется окно:
Примечание URL адреса могут быть абсолютными или относительными в зависимости от того, используют ли в себе имя домена. Например, ссылка Оба вида ссылок работают при создании шаблонов или добавлении материалов. Разница в том, что если в какой момент придется сменить домен, то в каждой абсолютной ссылке его придется изменить. В то время как относительные ссылки будут работать без изменений. После заполнения обязательных полей, нажмите кнопку "Применить" и увидите, что появился новый пункт меню:
Добавьте несколько пунктов меню подобным образом. А когда потребуется создать вложенные пункты, воспользуйтесь значком зеленого крестика, около его названия. Также, в любой момент можно отредактировать/удалить любой пункт меню.
Чтобы проверить, как работает меню, необходимо разместить его на сайте, обычно, для этого используют глобальные блоки. Размещаем меню в глобальных блокахДля размещения меню на сайте необходимо перейти в Панель управления - Дизайн - Управление дизайном (шаблоны) и открыть глобальный блок, отвечающий за шапку сайта. Например, "Верхняя часть сайта". В открывшейся форме ищем подходящее место для переменной
Нажимаем кнопку "Сохранить" и смотрим результат:
Пока меню не настроено и стилями займемся позже, так как рассматривать CSS для меню без учета адаптивности не имеет смысла. Это будет в одном из следующих уроков под названием адаптивное меню для сайта. Для примера, можно использовать эти стили: .uMenuRoot a, .uMenuRoot span { text-decoration: none; color: #333; } .uMenuRoot { float: left; padding: 0px; margin: 10px; } .uMenuH>.uMenuRoot>li { float: left; list-style-type:none; background: #e5e5e5; } .uMenuH a, .uMenuH>.uMenuRoot>li.uWithSubmenu { display: block; padding: 8px; } .uMenuH a:hover, .uMenuH>.uMenuRoot>li.uWithSubmenu:hover { background: #cccccc; z-index: 1; } .uMenuH>.uMenuRoot>.uWithSubmenu>ul { padding: 0px; margin: 5px 0; display: none; position: absolute; background: #ffffff; } .uMenuH>.uMenuRoot>.uWithSubmenu>ul>li { list-style-type:none; } .uMenuH>.uMenuRoot>.uWithSubmenu:hover>ul { display: block; } Упражнения
| |
| |
Просмотров: 448 | Комментарии: 1 | |
Всего комментариев: 1 | |
0
| |