Linux

Как сделать меню в Joomla, три способа создания меню в Joomla. Как сделать меню в Joomla, три способа создания меню в Joomla Модуль меню для joomla 3 горизонтальный

Обзор будет проходить в последней, на момент написания статьи (01.07.2016), русскоязычной версии DJ-MegaMenu 3.4.1, Joomla 3.5.1 в шаблоне JM Real Estate Ads 1.0.2. Обратите внимание, что для DJ-MegaMenu есть более двух десятков готовых, профессиональных шаблонов сайта . О некоторых из них можете прочесть в . В статье «Видео урок по DJ-Catalog. Создание интернет магазина с нуля (часть 3) » показан пример настройки новой версии DJ-MegaMenu.

Существует бесплатная версия этого модуля меню – DJ-MegaMenu Light и совсем урезанная версия DJ-Menu .

Особенности мега меню для Joomla

Рассмотрим основные особенности DJ-MegaMenu.

Возможность настройки каждого пункта меню отдельно друг от друга при помощи расширенных опций в менеджере меню Joomla. Не забудьте активировать плагин DJ-MegaMenu. Добавление иконок, подзаголовков, задание фона (изображение с указанием вертикального и горизонтального выравнивания), возможность показа\скрытия каждого отдельного пункта меню в мобильном или обычном меню. Так же можно задать ключ доступа, который позволит перемещаться в нужную часть страницы при помощи клавиатуры.
Возможность создания многоколоночного (с заданием ширины колонок), древовидного или обычного подменю (рисунок ниже).

Добавление иконок (Bootstrap или Font Awesome) к пунктам меню. Возможность отображения иконок в мобильном или обычном меню.
Добавление различных эффектов CSS3 анимации появления и исчезания (более 30). Настройка времени открытия и закрытия подменю. Настройка направления открытия и возможность раскрытия подменю по нажатию или наведению.
Добавление модулей в меню (рисунок ниже) (с заданием стиля отображения модуля).

Закреплённое меню. Возможность закрепить горизонтальное мега меню для Joomla в верхней части страницы при её прокрутке.
Возможность добавления логотипа в закреплённое меню, его выравнивания и настройки отступа.
Удобные настройки цветов элементов меню из административной части Джумла без необходимости правки CSS файлов.
Две предварительно настроенные темы оформления горизонтального меню.
Данный модуль меню Joomla адаптивный (отзывчивый). Полная поддержка работы с меню при помощи касания (тачскрины) и мобильных устройств iPhone, iPad, Android, Windows Phone.

Возможность выбора одного из нескольких типов мобильного меню с настройками каждого типа. Например, позиция, тема оформления (светлая и тёмная), выравнивание, логотип, наличие «off canvas» меню (выдвижного меню).
Возможность настройки цветов элементов мобильного меню из админки Joomla без необходимости правки CSS файлов.
Возможность настройки состояния мобильного подменю (свёрнуты, развёрнуты, развёрнуты все элементы подменю активного меню)
Возможность вставки модуля в «off canvas» меню.
Настройка «off canvas» меню (список или аккордеон), добавление логотипа. Наличие 14 эффектов. Возможность вставки кнопки открытия мобильного меню в любу часть страниц.
Полная поддержка навигации по меню согласно требованиям стандарта WCAG 2.0 (раздел 508) для людей с ограниченными возможностями.
Поддержка Joomla 3.х и 2.5.
Плагин и модуль мега меню для Joomla переведён на русский язык.
Наличие русскоязычных всплывающих подсказок для опций модуля.
Хорошая документация и техническая поддержка (на английском).

Бесплатная версия DJ-MegaMenu

Есть бесплатная версия DJ-MegaMenu – DJ-MegaMenu Free Edition . Но есть ограничения бесплатной версии по функциональности:

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

По большому счёту, настройка DJ-MegaMenu аналогична настройке любого другого меню:

Создаёте меню в менеджере меню.
Создаёте пункты меню в этом меню.
Устанавливаете DJ-MegaMenu.
В настройках модуля DJ-MegaMenu указываете название созданного меню и публикуете модуль меню в нужной позиции шаблона.

Все остальные настойки и создание стилей – это тонкости. В этой статье есть видео урок по настройки обычного меню Joomla (нужно начать смотреть видео с 24:13).

Более «тонкие» DJ-MegaMenu разнесены по трём разным местам:

Настройки модуля меню Joomla (в менеджере модулей). Тип «DJ-MegaMenu».
Настройки модуля кнопки мобильного меню (в менеджере модулей). Тип «DJ-MegaMenu - Mobile Menu Button».
Настройки каждого пункта меню в менеджере меню Joomla. Для того, чтобы они появились нужно активировать плагин «Системный плагин DJ-MegaMenu» в менеджере плагинов.

Настройки модуля меню Joomla разделены на три вкладки: Модуль, CSS3 анимация и опции скрипта, Настройки мобильного меню . Почти все опции оснащены дополнительными всплывающими подсказками (на русском языке) или понятны из названия. Будут рассмотрены только наиболее интересные, на мой взгляд параметры. Также не будут затрагиваться одинаковые для всех модулей и пунктов меню опции.

На первой вкладке Модуль (рисунок ниже) Вы задаёте название меню Joomla, которое нужно показывать. Также можете настроить опции вывода иконок и подзаголовков пунктов меню в зависимости от того, какое меню отображается у пользователя. Плюс, можно отключить\включить добавление Шрифтов Awesome. Это полезно в том случае, когда Вы используете иконки пунктов меню из Шрифта Awesome (набор стилей). Если этот набор уже подгружается шаблоном сайта или другим расширением, можно отключить для препятствия повторной загрузки стиля и оптимизации скорости загрузки сайта.

На вкладке , в основном собраны настройки эффектов анимации меню (рисунок ниже). Тут же можно задать тип подменю (дерево или спадающий список), направление открытия, спадающего списка подменю, действие, при котором будет открываться подменю (нажатие, наведение) и включить\отключить улучшенную совместимость меню для управления с клавиатуры (WCAG 2.0 (раздел 508)). Обратите внимание, что некоторые из этих опций, например, Ширина столбца в пикселях , может быть переопределена для конкретных пунктов меню в настройках каждого из них в менеджере меню.

Вкладка (рисунок ниже) содержит опции, позволяющие сконфигурировать мобильную версию меню. Причём, выбирая один из 3-х «типов» мобильного меню, Вам будут доступны разные настройки.

Рассмотрим некоторые настройки пунктов меню в менеджере меню Joomla (рисунок ниже).

Если Вы создаёте многоколоночное подменю, то для задания новой колонки нужно активировать опцию Начать новый столбец (точка разрыва) для того пункта меню, с которого хотите начать новый столбец. Вложенные в него пункты будут отображаться в этом столбце. Тут же можно задать ширину нового столбца в пикселях (она переопределит ширину, заданную в настройках модуля).

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

В настройках модуля кнопки мобильного меню (рисунок ниже) ничего особого нет. Вы можете выбрать, какой модуль DJ-MegaMenu нужно активировать по нажатию на эту кнопку и можете задать суффикс CSS-класса модуля для задания внешнего вида кнопки.

Русификатор DJ-MegaMenu

Как видите, создать горизонтальное мега меню для Joomla с расширением DJ-MegaMenu достаточно просто. Ещё раз подчеркну, что оно очень хорошо адаптировано к мобильным устройствам и гибко настраивается даже без правки исходного кода. Если Вы применяете это расширение на сайте, где используется шаблон не от Joomla-Monster.com, то, возможно, дополнительно понадобится добавить CSS-стили для гармоничной интеграции данного горизонтального меню Joomla с общим дизайном сайта. А если применяется шаблон от Joomla-Monster.com, то достаточно в настройках модуля, для опций Тема (вкладка ) и Тема мобильного меню (вкладка ) выбрать вариант переопределить из шаблона .

Продолжаем знакомиться с администрированием Joomla 3. В этой статье подробно познакомимся с возможностью системного меню Joomla. Пожалуй, нет необходимости говорить, что такое меню сайта. Достаточно, сказать, что на сайте Joomla меню можно разместить вертикально в правом и/или разместить горизонтально в районе шапки сайта.

Из общей информации про меню Joomla, стоит упомянуть, что материалы категории, которая не прикреплены к какому-либо меню сайта, не будут на сайте видны.

Меню и пункты меню Joomla 3

Меню сайта Joomla создаются администратор сайта или пользователями сайта с установленными разрешающими правами на управление меню сайта. Права на управление меню выставляются на вкладке Компоненты→Менеджер меню→Права.

Само меню Joomla это не информативная, а системная единица сайта. Создается меню для последующего создания информативных пунктов меню.

Примечание: На сайте Joomla можно создавать любое количество меню и любое количество пунктов меню с любой глубиной вложенности. Вложенность меню это дерево по типу: пункты меню-подпункты пунктов меню-подпункты подпунктов пунктов меню и т.д.

Как создать меню сайта Joomla

Для создания меню сайта открываем вкладку: Меню→Менеджер меню→Создать меню из горизонтального бара или Структура→ Менеджер меню→Создать меню вертикального меню административной части сайта.

Меню даем имя, обязательно вписываем системное имя меню (тип меню). Типом меню может быть любое латинское слово, понятно указывающее назначение меню. Например, mainmenu, homemenu, topmenu, footermenu.

Как создать пункты (подпункты меню)

Создание пунктов меню, производится на вкладке: Меню→Название меню→Создать пункт меню.

Типы пунктов меню

Как я уже упоминал, пункты меню Joomla 3 это информативные единицы сайта. При помощи пунктов меню можно открывать на сайте страницы с различной информацией. Эта информация может быть различной и в зависимости от типа информации, создаются различные типы меню. Посмотрим на типы пункта меню:

Тип пункта меню

1. Контакты (4 типа);

2. Ленты новостей (3 типа);

3. Материалы (7 типов), а именно

Архивные материалы;
Избранные материалы;
Материал;
Блог категории;
Создать материал;
Список всех категорий сайта;
Список материал одной категории.

4.Менеджер настроек;

5.Менеджер пользователей (7 типов);

6.Метки (3 типа);

7.Обертка(Wrapper);

9.Системные (4 типа);

10.Умный поиск.

Как видите, типов пунктов меню много и при их помощи можно организовать очень неплохую навигацию по сайту.

Хватит теории, перейдем к практике и создадим меню с двумя, тремя пунктами меню.

Пример создания меню сайта Joomla

Создадим меню под названием «Меню1». Системное имя будет «menu-1».

Идем на вкладку: Меню→Создать меню.

На странице создания меню указываем его имя «Меню1» и системное имя «menu-1».

Жмем кнопку «Создать».

Все! Меню создано.

Что значит системное имя меню

Покажу, для чего нужно системное имя меню. Идем в phpmyadmin управляющий базой данных сайта.

Ищем таблицу: префикс_menu_types.
Открываем ее (клик по названию), что соотвествует SQLзапросу:
SELECT * FROM `префикс_menu_types`
И видим системное имя созданных меню (тип меню).

Вывод: системное имя меню нужно для создания уникальных значений в полях таблицы menu_types базы данных Joomla.

Итак, мы создали меню Joomla, пора создавать пункты меню.

Создаем пункты меню Joomla

На вкладке Меню→Пункты меню→Создать меню, создаем пункт меню.

class="eliadunit">

Даем пункту меню имя.

Выбираем тип пункта меню. Пусть это будет тип меню: Блог категории.

Указываем целевое окно: Новое окно с элементами навигации.

Справа указываем название нашего меню и родительский элемент данного пункта меню (2,3).

На других вкладках выставляем другие настройки пункта меню:

Параметры макета Блога (3) – шаблон блога. Можно указать количество колонок.

Отображение (4) – шаблон показа отдельного материала;

Настройки интеграции (5)– включаем создание RSS лент для этого пункта меню.

Параметры страницы (7). Здесь можно задать альтернативный заголовок, который буде виден в браузере. Также можно включить «Заголовок страницы». Он будет виден в начале всех страниц этого пункта меню в тегах

, что соответствует всем страницам категории блога.

Метаданные (8). Нужно заполнить метаданные для этого блога, а именно descriptionи keywords. Descriptionдолжен быть уникальным и длинной не более 165 знаков. Keywords не обязателен.

После проверки всех настроек пункта меню, жмем «Создать» или «Создать закрыть».

Всё! Пункт меню создан. Осталось разместить меню на сайте.

Как разместить меню на сайте Joomla

Разместим два меню на сайте. Горизонтальное выпадающее и вертикальное с показом всего дерева меню.

Как разместить выпадающее горизонтальное меню Joomla

Выпадающее горизонтальное меню Joomla размещаем в специальном модуле шаблона, под названием «menu». В шаблоне могут быть созданы дополнительные поля для размещения меню, например footermenu, topmenu.

Для создания модуля меню идем на вкладку: Менеджер модулей →Создать меню. Выбираем тип модуля «Меню».

Настройки модуля меню

На вкладке «Привязка к пунктам меню» указываем на каких страницах сайте показывать этот модуль с меню.

Создаем меню в Джумла 3

В этом уроке мы рассмотрим процесс создания меню на Вашем сайте под управлением CMS Joomla 3. На сайтах под управлением Джумла можно создать меню любого вида. Мы рассмотрим 3 основные типа меню для Вашего сайта

- Joomla 3

- Выпадающее меню в Joomla 3

Создание обычного меню в Joomla 3

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

Создается такое меню довольно просто. Для начала необходимо определиться с позицией, на которой будет расположен данный пункт меню. Чтобы просмотреть позиции Вашего сайта необходимо к его адресу добавить значение «? tp =1» и перейти по указанному адресу. Например, site . ru /? tp =1 . В итоге должны будут отобразиться все позиции, которые имеются в установленном на Вашем сайте шаблоне

Если позиции не отображаются, то, скорее всего у Вас отключен их вывод. Чтобы включить их, перейдите в раздел СИСТЕМА – ОБЩИЕ НАСТРОЙКИ – МЕНЕДЖЕР ШАБЛОНОВ .

И в разделе ПРОСМОТР ПОЗИЦИЙ МОДУЛЕЙ установите значение – ВКЛЮЧЕНО .

На рисунке видно, что для создания обычного вертикального меню, Вы можете использовать позиции 7, 4 и 5. В различных шаблонах номера и названия позиций могут отличаться от тех, что показаны на рисунке.

К примеру, мы хотим создать меню и расположить его в позиции 5. Теперь давайте по пунктам разберемся, как это сделать.

1) Для начала переходим в раздел МЕНЮ – МЕНЕДЖЕР МЕНЮ

2) Здесь нас интересует пункт

3) После этого Вы попадете в раздел параметров меню.

Вам необходимо заполнить следующие поля:

Заголовок – название Вашего меню. Можете указать «Левое меню» или же задать ему конкретное название «Статьи о рыбалке»

Тип Меню – обязательное поле, которое абсолютно не нужно. Здесь можете написать что угодно. Обычно копируется текст с раздела Заголовок.

Описание – можете написать несколько фраз о своем меню. Поле необязательно и его можно не заполнять.

4) Теперь необходимо указать позицию, где будет располагаться данное меню. Мы создали меню, присвоив ему название «123» . Теперь оно расположено в разделе МЕНЮ – МЕНЕДЖЕР МЕНЮ .

5) Жмем на кнопку «Добавить модуль для данного типа меню»

Здесь Вам необходимо указать:

Заголовок меню – укажите название Вашего меню.

Показывать заголовок – установите ПОКАЗАТЬ если хотите, чтобы заголовок отображался на сайте.

Состояние – установите ОПУБЛИКОВАНО

В разделе ПОЗИЦИЯ Вы должны указать позицию, где будет расположено созданное меню

К примеру, на сайте используется шаблон - Lightbreeze-blue значит, выбираем его и указываем позицию, где будет расположено это меню!

Но меню не будет отображаться на сайте, до тех пор, пока Вы не создадите хотя бы 1 пункт. Для создания пункта меню необходимо в разделе МЕНЮ выбрать созданное меню и в выпадающем окне выбрать раздел .

После этого мы попадаем на страницу создания пункта меню.

Здесь укажите заголовок меню и выбирайте

Джумла предлагает своим пользователям большое разнообразие модулей для меню. Обо всех этих модулях будет рассказано в отдельном уроке. Мы же попытаемся создать пункт меню, который будет выводить отдельный материал. Для этого выбираем значение МАТЕРИАЛЫ – МАТЕРИАЛ .

В итоге у Вас должно получиться следующее

Как видите, создание меню на Джумле довольно простое и не требует много времени.

Создание верхнего меню в Джумла 3

У многих начинающих пользователей CMS Joomla 3 возникают проблемы с созданием верхнего или горизонтального меню на своем сайте. Хотя в этом нет ничего сложного. Давайте на примере рассмотрим процесс создания такого меню. Данный процесс мало чем отличается от создания обычного меню на Джумле.

1) Заходим в раздел сайта МЕНЮ – МЕНЕДЖЕР МЕНЮ

2) Нажимаем создать меню и создаем новое меню, назвав его ВЕРХНЕЕ МЕНЮ

3) Только теперь нам понадобиться указать месторасположение нашего меню в верхней части сайта. Для этого вновь просматриваем имеющиеся позиции, введя в поисковой строке запрос site . ru /? tp =1 (где site . ru – название Вашего сайта).

Как видим, в верхней части нашего сайта есть только 2 позиции – Позиция 2 и Позиция 1.

Теперь заходим в раздел МЕНЮ – МЕНЕДЖЕР МЕНЮ и жмем на кнопку

Так же как и для обычного меню прописываем заголовок. А в разделе позиция, Выбираем позицию 1 или 2.

Ну и теперь, после того, как Вы создадите пункты меню, Ваше верхнее меню примет такой же вид, как и на нашем сайте.

Создание выпадающего меню на Joomla 3

Ну и еще хотелось бы рассказать о создании выпадающего меню на Joomla 3. Делается это довольно просто. Для начала Вам нужно создать само меню и пункты меню, которые будут выпадать.

Для этого создаем основное меню, которое назовем «Группа материалов» и два подпункта этого меню «Подпункт 1» и «Подпункт 2» . Для того, чтобы привязать подпункты меню к основному, при создании подпунктов в поле РОДИТЕЛЬ укажите основной пункт меню, в нашем случае это «Группа материалов». В итоге у Вас должно получиться так, как показано на рисунке ниже.

После этого заходим в настройки основного меню «Группа материалов» и в разделе устанавливаем значение ДА .

В итоге мы получим довольно удобное выпадающее меню.

Заключение

В данном уроке мы рассмотрели основные вопросы, касающиеся создания меню на Joomla 3 . Если у Вас возникли какие-либо вопросы, Вы можете задавать их, оставляя комментарии к этой статье!

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

Некоторые расширения могут не поддерживаться определенными версиями платформы. Поэтому прежде чем устанавливать расширение, нужно определить какую версию Joomla вы используете.

Maxi Menu CK

Это выпадающее адаптивное мега-меню с несколькими столбцами. Также можно загружать внутрь него модули. iPhone , iPad , Android-совместимое . AdsManager , совместимый с Joomshopping , Virtuemart , Hikashop :

SJ Flat Menu

Это простой, но мощный модуль для улучшения юзабилити и навигации сайта! Он позволяет отображать многоуровневые меню. С его помощью можно вывести выпадающее, аккордеон-меню, горизонтальное или вертикальное меню с элементами, раскрывающимися в правую или левую сторону. Меню, созданное с помощью данного модуля меню для Joomla 3 , поможет посетителям сайта находить нужный контент, не тратя на это много времени:

Скачать / Дополнительная информация