Найти в Дзене
Сам Себе Веб-Мастер

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

Модуль "Двухуровневое меню" альтернатива штатному меню в движке MyEngine. Работает с тем же файлом, который содержит всю информацию загруженную до установки модуля. Поэтому после установки модуля не нужно совершать каких-то дополнительных действий для синхронизации работы модуля и движка. После установки модуля вывод штатного меню в разделе "Меню" отключается и управление осуществляется из админпанели модуля. Установка модуля 1. Загрузите архив menu2.zip в разделе "Управление расширениями" панели управления. Открываем раздел "Управление расширениями", в горизонтальном меню нажимаем ссылку "Загрузить и установить расширение". Откроется диалоговое окно для загрузки архива с расширением. Нажмите кнопку "Выберите файл". Откроется контекстное меню браузера. Найдите папку, в которую вы сохранили скаченный файл с архивом расширения. Откройте эту папку, выберите файл с архивом и нажмите кнопку "Открыть". Диалоговое окно закрывается, и система возвращается в раздел «Управление расширениями». В
Оглавление

Модуль "Двухуровневое меню" альтернатива штатному меню в движке MyEngine. Работает с тем же файлом, который содержит всю информацию загруженную до установки модуля. Поэтому после установки модуля не нужно совершать каких-то дополнительных действий для синхронизации работы модуля и движка. После установки модуля вывод штатного меню в разделе "Меню" отключается и управление осуществляется из админпанели модуля.

Установка модуля

1. Загрузите архив menu2.zip в разделе "Управление расширениями" панели управления.

Открываем раздел "Управление расширениями", в горизонтальном меню нажимаем ссылку "Загрузить и установить расширение".

-2

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

-3

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

-4

Диалоговое окно закрывается, и система возвращается в раздел «Управление расширениями». В списке загруженных расширений появилась строчка "Двухуровневое меню", значит наше расширение установлено.

-5

2. Переходим в панель управления на главной странице, находим и нажимаем на иконку "Двухуровневое меню".

-6

Откроется панель управления модулем "Двухуровневое меню".

Обзор панели управления модулем

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

Список пунктов меню
Список пунктов меню

Вид главной вкладки панели управления модулем на этом демо-сайте.

Список пунктов меню
Список пунктов меню

Создание основного пункта меню

Для добавления основного пункта меню необходимо нажать на кнопку «Добавить основой пункт». Откроется вкладка «Создание основного пункта меню».

-9

Вкладка имеет следующие настройки:

  • Название пункта - вводится название основного пункта меню.
  • Дополнительные пункты - эта настройка имеет две опции: Нет и Есть. По умолчанию установлено - Нет, т.е. пункт создается без вывода выпадающего блока меню с дополнительными пунктами. Если такой блок необходим, то нужно выбрать - Есть.
-10
  • Ссылка на страницу - эта настройка имеет две опции: Выбрать страницу из списка и Вставить ссылку в ручную. По умолчанию выбрано - Выбрать страницу из списка. Это значит, что нужно открыть список и выбрать из него нужную страницу.

Редактирование основного пункта меню

Для редактирования основного пункта меню необходимо нажать на ссылку «Редактировать», после чего произойдет переход в соответствующую вкладку.

-11

Создание дополнительного пункта

Для добавления дополнительного пункта меню необходимо нажать на кнопку «Добавить доп. пункт». Откроется вкладка «Создание дополнительного пункта».

-12

Редактирование дополнительного пункта

Для редактирования основного пункта меню необходимо нажать на ссылку «Редактировать», после чего произойдет переход в соответствующую вкладку.

-13

Настройки

Модуль "Двухуровневое меню" имеет следующие настройки. По умолчанию модуль имеет настройки соответствующие шаблону "Classic".

-14
  • Html-код кнопки мобильного меню - вводится html-код кнопки мобильного меню. По умолчанию прописан код иконки из библиотеки Font Awesome, которая установлена в шаблоне "Classic". При необходимости через это поле можно загрузить любой символ в виде изображения или html-символа.
-15
  • Html-код стрелки в пункте меню первого уровня - вводится html-код стрелки. По умолчанию прописан код иконки из библиотеки Font Awesome.
-16
  • Включить вывод стрелки в пункте меню - при необходимости вывод стрелки можно отключить.
  • Оформление меню - настройка имеет три опции: Использовать стили шаблона, Стили для шаблона "Classic", Произвольное оформление меню..
-17

- Использовать стили шаблона - опция подключается если шаблон имеет собственные стили для этого модуля.

- Стили для шаблона "Classic" - модуль имеет встроенные стили оформления, которые соответствуют шаблону "Classic". Если подключен этот шаблон, то выбирается эта опция.

- Произвольное оформление меню - при выборе этой опции можно настроить оформление меню под любой шаблон, т.е. выбрать цвет фона, цвет ссылок, размер шрифта и т.п.

  • Подключить библиотеку jQuery - для корректной работы модуля должна быть подключена библиотека jQuery. Если шаблон не имеет собственной такой библиотеки, то необходимо поставить чекбокс.
  • Добавить кнопку "Ещё" - дополнительная кнопка в меню, используется если все пункты меню не входят по ширине на страницу. При добавлении этой кнопки, будет выводится выпадающий блок, в который можно поместить ссылки на лишние страницы, чтобы уменьшить ширину меню.
  • Текст в кнопке - по умолчанию выводится "Ещё".

Вывод меню в шаблон

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

-18

Для вывода модуля на страницы сайта необходимо в файле template.php найти и удалить код вывода штатного меню и прописать вывод PHP-функции

-19

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

ВЫВОД КНОПКИ "ЕЩЕ".

Вариант, когда ширина меню слишком большая можно посмотреть если подключить шаблон "Robotix".

-20

Для исправления этой ситуации используем добавление кнопки "Ещё". Переходим в настройки модуля.

-21

Добавляем кнопку "Ещё" поставив соответствующий чекбокс, в поле текста вводим - Смотреть ещё" и сохраняем изменения.

Возвращаемся в основную вкладку модуля, переносим ссылки на лишние страницы в кнопку "Смотреть ещё", а пункты с ссылками на эти страницы удаляем из меню. Получаем вот такой результат.

-22

Переходим на сайт и смотрим результат.

-23

Ширина меню уменьшилась и все встало на свои места, ничего не разъезжается. Наведем курсор на кнопку "Смотреть ещё".

-24

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

Как вывести модуль в шаблоне "Default Template" Вы узнаете во второй части статьи.

Демо

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