Урок 50. Конструктор меню

Каким должно быть меню интернет магазина

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

Основное меню решает вопрос навигации по сайту (исключая каталог) и может содержать ссылка на: главную, страницу со списком способов доставки/оплаты, помощь по сайту, отзывы, прочие информационные материалы, новости, статьи, обзоры.

Меню категорий решает вопрос навигации по каталогу и может содержать ссылки на основные и вложенные категории и виртуальные категории "Новинки", "Бестселлеры", "Спецпредложения".

Еще несколько правил хорошего тона для меню:

• Главное меню должно располагаться горизонтально, а меню категорий - вертикально. При этом каждое из них должно содержать не более восьми пунктов
• Основное меню навигации должно быть продублировано в нижней части сайта
• Пункт каталога или основного меню должен выделяется, если перейти в него. При этом выделение не должно оттягивать много внимания
• Допускается не использовать меню для страниц оформления заказа или оплаты
• Название пунктов должно четко соответствовать тому, куда они ведут. Не допускается менять/сокращать пункт, он должен повторять заголовок страницы на которую ссылается

Это мои рекомендации, если осознаёте, что делаете, можно им четко не следовать.

Обзор конструктора меню uCoz

Чтобы начать пользоваться конструктором меню, перейдите в Панель управления - Дизайн - Конструктор меню:

Появится интерфейс для взаимодействия с меню сайта:

1. Название меню, которое открыто для редактирования
2. Переменная, которая отвечает за вывод меню в шаблоне (рассмотрим ниже подробнее)
3. Способ отображения: вертикальный или горизонтальный. Не может быть изменен после создания меню
4. Кнопки изменения названия или удаления меню
5. Добавление, редактирование и удаление пунктов меню
6. Кнопка сохранения меню. Если закрыть вкладку не сохранив, все изменения будут потеряны
7. Используемые модули на сайте. Блок позволяет оперативно добавлять ссылки в меню
8. Селектор созданных ранее меню

Рассмотрим процесс создания горизонтального меню с самого начала. Для этого откроем селектор созданных ранее меню и выберем пункт "Создать меню". Откроется форма создания меню:

Введем название для нашего нового меню, выберем способ отображения "горизонтальный" и нажмем кнопку "Сохранить". Откроется такая форма:

Чтобы добавить пункт меню, нажмите соответствующую кнопку, откроется окно:

1. Название пункта меню, которое будет отображаться на сайте
2. URL адрес, на который приведет пункт меню
3. Стрелочка, при нажатии на которую открываются дополнительные настройки. Возможность задать свой класс для пункта меню. Используется, если нужно выделить или скрыть какой-либо пункт меню. Рассмотрим чуть ниже, как это реализуется, а пока оставим его пустым
4. Открывать ссылку в новом окне

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

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

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

Размещаем меню в глобальных блоках

Для размещения меню на сайте необходимо перейти в Панель управления - Дизайн - Управление дизайном (шаблоны) и открыть глобальный блок, отвечающий за шапку сайта. Например, "Верхняя часть сайта".

В открывшейся форме ищем подходящее место для переменной $NMENU_2$.

Нажимаем кнопку "Сохранить" и смотрим результат:

Пока меню не настроено и стилями займемся позже, так как рассматривать 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;
}