Найти тему
Сам Себе Веб-Мастер

Модуль "Двухуровневое меню". Часть 2

Оглавление

В первой части описания модуля "Двухуровневое меню" были описаны основные настройки, которые соответствуют шаблону "Classic" по умолчанию. Во второй части описания речь пойдет о произвольном оформлении меню на примере шаблона "Default Template". В этом случае настройки модуля будут иметь вид

Вид настроек Главного меню
Вид настроек Главного меню

Html-код кнопки мобильного меню - прописан html-код кнопки мобильного меню в виде изображения в формате svg.

-3

Html-код стрелки в пункте меню первого уровня - прописан html-код стрелки в виде изображения в формате svg.

-4
  • Включить вывод стрелки в пункте меню - вывод стрелки включен.
  • Оформление меню - выбрана опция Произвольное оформление меню.
  • Подключить библиотеку jQuery - подключена библиотека jQuery, т.к. шаблон "Default Template" не имеет собственной библиотеки

Вывод штатного меню в шаблоне "Default Template" имеет вид

-5

Как видно из приведенного кода, штатное меню находится внутри тега header, т.е. по простому внутри шапки шаблона. В силу такой верстки и соответствующих стилей по умолчанию, не удалось простым удалением кода штатного меню и заменой его функцией вывести меню в шаблон. Пришлось несколько изменить верстку, удалить стили штатного меню и скрипт, управляющий выводом мобильного меню.

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

-6

Возвращаемся в настройки модулем. В горизонтальном меню панели управления есть ссылка - Оформление меню. Нажимаем эту ссылку и открываем вкладку с одноименным названием. В этой вкладке находятся настройки стилей оформления меню. Не смотря на достаточно большое количество настроек все относительно просто. Настройки поделены на два блока: Настройки основного меню и Настройки выпадающего блока.

Настройки основного меню

-7

Все настройки сводятся в основном к выбору цвета фона или текста ссылок. Чтобы выбрать цвет нужно кликнуть на иконку цвета слева от каждого поля, после чего откроется палитра цветов.

-8

После выбора цвета в палитре, его код в формате Hex прописывается в соответствующем поле. Так же можно настроить размер и насыщенность шрифта, регистр текста.

Настройки выпадающего блока

-9

Настройка оформления выпадающего блока осуществляется аналогично.

На этом описание настройки модуля "Двухуровневое меню" можно считать законченным.

Демо

#разработка веб-сайтов #создание сайтов #веб-дизайн #интернет #myengine