модуль выпадающего меню joomla

Модуль выпадающего меню joomla

В этой статье мы рассмотрим самые разные разработки, улучшающие навигацию сайта joomla: от кнопки «Наверх» до многоуровневых меню, панели инструментов с иконками соцсетей.

Часть из представленных к обзору расширений подготовлены к работе на джумла 4 (покажем как устанавливать и настраивать). Список расширений составлен в соответствии с рейтингом на официальном портале CMS – joomla.org (по степени популярности того или иного расширения).

Меню статьи

(список рассмотреных компонентов меню)

Вертикальное, горизонтальное, аккордеон, многоуровневое, плавающее, адаптивное (в пл. вер.)

Навигационная кнопка, возвращающая в начало страницы. Стиль настраивается через CSS.

Вертикальное, горизонтальное, многоуровневое, статичное, адаптивное (во всю ширину экрана).

Меню из иконок (собственных или предустановленных), с надписями и ссылками. Вертикальное, горизонтальное, статичное.

Навигационная кнопка, возвращающая в начало страницы. Обширный набор функций.

Вертикальное, горизонтальное, многоуровневое, статичное, адаптивное (в формате аккордеон на мобильных устройствах).

Горизонтальное, многоуровневое, статичное, адаптивное (аккордеон).

Вертикальное, горизонтальное, многоуровневое, статичное, адаптивное (аккордеон).

Панель инструментов для нижней части шаблона (для вывода иконок соцсетей или HTML-кода).

Навигационные кнопки, возвращающие вниз или вверх страницы.

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

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

Пункт этого меню прокручивает страницу до нужного места (якоря). Вертикальное, горизонтальное, многоуровневое, статичное.

Плавающее в правом нижнем углу меню в виде иконки, с выпадающим списком.

Вертикальное, статичное. Отображается в формате «дерева» или списка. Отображает структуру материалов, категорий, разделов в joomla.

Maxi Menu CK

Мощное приложение, позволяющее выводить различные типы меню joomla:

Главные особенности:

Функции

В пунктах могут быть вставлены не только заголовки, но и картинки, модули joomla, можно добавить к заголовку описание. Возможно создание дополнительных столбцов. Имеются встроенные эффекты для красивого вывода подменю. Интеграция с контентом Virtuemart, Adsmanager, Hikashop, Joomshopping, при условии установки дополнительных патчей (ссылки указаны в модуле). Изменить внешний вид можно с помощью множества готовых решений (устанавливаются также дополнительно пакет тем) или спецнастройками (дополнительный компонент и плагин MaxiMenuCKParams). Главное преимущество разработки – модуль SEO оптимизирован.

Работа с приложением

Скачиваем здесь: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/maxi-menu-ck. Создадим навигацию с пользовательским описанием и модулем, например для авторизации (таким же способом можно вставить форму обратной связи, слайдер, другие сторонние разработки), с дополнительным столбцом, иконкой.

Выполним действия, прописанные в самом модуле (информация появляется сразу после установки). Для этого после установки откроем менеджер меню, откроем готовое или создадим новое специально под наши цели (создаём стандартными методами joomla, а затем выводим с помощью модуля).

Несколько полезных функций есть на вкладке «Дополнительные параметры». Главные настройки во вкладке Effect. Зададим позицию, например, стандартную.

Во вкладке Styles Options выберем подходящую тему, зададим ориентацию, например, боковую, активируем адаптивный дизайн. Откроем Logo Option, чтобы загрузить иконку: будет высвечиваться слева или справа. Можно прописать её высоту и ширину, задать альтернативный текст, вставить ссылку.

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

Top of the page

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

Возможности

От других подобных разработок Topofthepageотличается наличием дополнительных функций.

Работа с приложением

Страница https://extensions.joomla.org/extensions/extension/structure-a-navigation/site-navigation/top-of-the-page. После установки откроем плагин. В нём несколько вкладок. Для начала активируем его. После этого кнопка ярко-желтого цвета сразу появится на сайте. Переведём страницу с помощью браузера, чтобы было проще изучать настройки плагина, изменить кнопку под свой шаблон.

Во вкладке Button имеется параметр настройки прозрачности – устанавливается в диапазоне от 0 до 100, где 0 – полная прозрачность. Если включить параметр Automatic z-index, кнопка размещается над самым высоким индексом.

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

На вкладке CSS можно изменить стиль. Готовые решения есть на сайте разработчика. Например, самоепростое:

Вернуться к началу

На последней вкладке представлены инструкции по настройке перенаправления с английской надписи на русскую («Вернуться наверх» вместо Returntotop).

ARI YUI Menu

Данный модуль подстраивается под нужды веб-мастера благодаря открытому коду.

Популярный аналог: ARI Ext Menu.

Преимущества:

Параметры

Ссылка: https://extensions.joomla.org/extension/ari-yui-menu. Откроем установленный модуль, произведём настройки.

Из наиболее важных – источник, ширина (например, 100%), выравнивание подпунктов (если необходимо прописываются спец. значения, например «tr», «tl»), размер шрифта (лучше сделать покрупнее), ориентация (горизонтальное, вертикальное), код CSS, который можно подправить для больше соответствия шаблону сайта. Благодаря открытом исходному коду можно изменить толщину обрамления, отступы, цвет фона, шрифта, высоту, ориентацию.

Ninja Simple Icon Menu

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

Настраивается просто, но параметров достаточно много.

Помимо выбора самих изображений, прописанных заголовков, описаний, url, можно указать:

Можно включить CSS.

Добавим несколько иконок – выберем из имеющихся или добавим свои, предварителььно загрузив их в папку /media/mod_ninja_simple_icon_menu/images (в корневой папке сайта). После добавления значки можно включать и отключать, разрешить отображать только для зарегистрированных пользователей.

Ninja Simple Icon Menu можно использовать для отображения преимуществ компании, но поскольку речь идёт всё-таки о создании меню, модуль больше подходит для красивого вывода ссылок на материалы джумла или страницы сайта.

Skyline Scroll to Top

Плагин для отображения кнопки «Наверх». Отличается от Topofthepageболее обширным набором функций. Одинаково хорошо работает с MooTools и jQuery.

Возможности

Настройка

Загружать со страницы: https://extensions.joomla.org/extensions/extension/structure-a-navigation/site-navigation/skyline-scroll-to-top/. После установки плагин по умолчанию выключим. Перейдём в менеджер плагинов, чтобы активировать его. Все настройки можно оставить по умолчанию: чтобы круглая кнопка со стрелочкой появилась на сайте, достаточно просто включить плагин.

А можно внести некоторые изменения:

DJ-Menu

Главное преимущество модуля – анимированные эффекты. Выводит горизонтальное и вертикальное меню, с выпадающим списком (если есть подпункты). Работает с MySQL и jQuery.

Возможности, конкретные опции

Roknavmenu

Модуль с предустановленной темой оформления, множеством настроек.

Настройки

После установки с его помощью можно вывести на сайт любое созданное средствами CMS Joomla меню (достаточно сделать выбор в поле «Источник»).

Можно ограничить вывод, указав с какого по какой уровень можно выводить. Есть опция включить/отключить вывод подпунктов.

Стиль оформления – либо по умолчанию, либо Fusion (настраивается прозрачность, эффекты, анимация, продолжительность).

С помощью поля, отведённого под CSS (последняя вкладка), можно добавить иконку, дополнительные строки, столбцы, задать другие пользовательские параметры.

Simple Responsive Menu

Простой модуль, выводит пункты списком, отображая подпункты так, как это предусмотрено в шаблоне сайта. Главное его достоинство – адекватное отображения на небольших мобильных устройствах (в виде кнопки с ниспадающим списком).

Установка, настройка, вывод на сайт

Ссылка для скачивания актуальной последней версии: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/simple-responsive-menu. Выбираем источник, например, mainmenu или создадим новое, специально под Simple Responsive Menu. Зададим пункт, который будет по умолчанию активным. Настроим уровни вложенности: по умолчанию с 1-го до последнего.

Перейдём в последнюю вкладку, где зададим параметры адаптивности:

– ширина экрана, при которой меню будет сворачиваться;

–место, где расположится кнопка.

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

Toolbar

Буквальный перевод – панель инструментов. Модуль создан для отображения фиксированного меню в нижней части шаблона (позиции debug), при прокрутке страницы остаётся на месте. Допустимо размещение иконок, например, соцсетей или HTML-кода.

Назначение

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

Совместимость с последней версией Web357 Framework v1.7.х.

Установка на джумла 4, настройка

Скачиваем через официальный портал joomla.org: https://extensions.joomla.org/extensions/extension/social-web/social-display/toolbar//. Устанавливаем привычным методом. По завершении увидим сообщение об успешной установке.

Находим уже опубликованный Fixed HTML Toolbar, изучаем настройки.

Главное – задать позицию debug, выбрать где отображать – по верху или по низу («верхнее», «дно»), добавить либо код, либо картинку со ссылкой.

Page Scroll Buttons

Модуль, выводящий кнопку для прокрутки веб-страницы. Использует код javascript, не замедляет страницу. Идеально подходит для размещения на страницах с очень длинными статьями или на LandingPage.

Функции

Главное предназначение – размещение навигационной кнопки в верхней или нижней части страницы.

Активация

Скачиваем здесь (после регистрации на сайте разработчика): https://extensions.joomla.org/extensions/extension/structure-a-navigation/site-navigation/page-scroll-buttons. Устанавливаем, заходим, отключаем вывод заголовка или переименовываем, активируем, назначаем позицию, выбираем страницы, на которых выводить (по умолчанию назначено – «ни на одной»).

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

Сохраним изменения, проверим результат на сайте.

Menu Wrench

Menu Wrench – идеальный вариант для сайтов, где множество меню, пункты которых порой целесообразно объединять, выводить вместе. Позволяет создать навигацию из любых пунктов (не важно на какой «глубине» они находятся, какому меню джумла относятся).

Возможности

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

Скачаем разработку с портала джумла: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/menu-wrench. Откроем для настройки: достаточно выбрать пункты и всё готово.

Оформление зависит от шаблона сайта (можно попробовать поменять стиль во вкладке «Дополнительные параметры»).

BM Cool Menu

Главное достоинство – множество опций для точечной настройки внешнего вида (цвета, текст, углы, границы). Плюс – открытый код CSS. Идеально подходит для отображения выпадающего списка.

Параметры настройки

Как и во многих других подобных разработках, для BM Cool Menu можно задать источник, активным по умолчанию определённый пункт (или оставить параметр «текущий»), указать уровни для отображения, включить или выключить опцию «показать подменю».

А также произвести точечные настройки внешнего вида:

Работает как с библиотекой jQuery, так и без неё (предусмотрена опция включить/выключить).

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

Menu Anchor

С помощью этой разработки вы можете использовать пункты плавающего меню как якоря для прокрутки страницы до нужного места или открытия нужного текста на другой странице. Расстановка якорей – популярный приём, особенно уместен на LandingPage, в статьях длиной до 20 экранов монитора. А с плавающим такой метод становится ещё эффективнее – плагин обеспечивает быструю навигацию по странице сайта.

Добавляем якоря в материал.

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

Floating Buttons

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

Преимущества

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

Активация

По умолчанию модуль не опубликован, но создан, не выведен ни на одной странице. Поэтому заходим, настраиваем главные опции (заголовок лучше скрыть).

Затем перейдём к специализированным:

Добавим сколько нужно пунктов (кнопка Menu Items). Пропишем для них – заголовок, ссылку, цвет кнопки, значка, выберем иконку из предложенных.

Проверим, что получилось. При необходимости поменяем параметры.

Articles Count

Модуль позволяет выводить сворачивающееся «дерево», создавать структурированные списки с категориями, с указанием количества статей. О приложении ещё нет отзывов на joomla.org, но оно находится не на последнем месте по популярности запросов в поисковиках.

Главные особенности:

Функции и параметры

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

Настраиваем и публикуем.

Может показаться, что одни плагины или модули меню joomla создавались в соответствии с последними тенденциями в сайтостроении, в то время как другие серьезно устарели (в отношении некоторых проектов стоит всерьёз задуматься о закрытии). И всё же для каждой из приведённых разработок можно найти достойное применение. Или выбрать наиболее подходящий вариант из топ-15 лучших меню джумла.

Источник

Выпадающее меню Joomla

Выпадающее меню сайта позволит вам иметь дружественный интерфейс и избавит от излишнего загромождения.

Много раз блуждая по сайтам, я видел вертикальное выпадающее меню, действительно красиво смотрится. Многие современные шаблоны для joomla умеют делать горизонтальное выпадающее меню, а в качестве вертикального предоставляют лишь распахивающийся список. Недавно мне подвернулся заказчик, который привел примеры того, как он видит свой сайт. Ему хотелось не только верхнее выпадающее меню. Так и возник вопрос о том, как создать боковое выпадающее меню.

Как сделать выпадающее меню joomla?

Создание выпадающего меню на сайте

Прежде всего, необходимо создать саму структуру будущего меню с необходимой иерархией. Это делается так же, как и для стандартного меню. Рассмотрим небольшой пример с живого сайта.

Макет иерархии выпадающего меню

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

Создание иерархии выпадающего меню

Установка модуля «ARI YUI Menu»

Процесс установки стандартный, в административной панели «расширения-установка и удаление», выбираем скаченный файл модуля и нажимаем кнопку «Установить».

Вертикальное выпадающее меню Вертикальное выпадающее меню

После сообщения об успешной инсталляции модуля, необходимо перейти к настройке модуля «Расширения-Модули». Находим в списке модуль «ARI YUI Menu» и нажав на ссылку оказываемся в странице настроек.

Боковое выпадающее меню Боковое выпадающее меню

Настройка модуля «ARI YUI Menu»

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

Выпадающее меню joomla Выпадающее меню joomla

Теперь посмотрим, что у нас получилось.

Как сделать выпадающее меню joomla

Согласитесь, не совсем красиво, необходимо убирать бордюр, убирать ненужные, уменьшить огромные отступы, увеличить высоту пунктов выпадающего меню. Про вылезающие звездочки голосования вообще молчу. Правим CSS. Обратите внимание на ID модуля, в моем случае (для Joomla 2.5) и (для Joomla 1.5).

Создание выпадающего меню на сайте Создание выпадающего меню на сайте

Мой CSS для модуля ARI YUI Menu, в вашем случае он, скорее всего, будет отличаться.

Смотрим что получилось, на мой взгляд, именно то, что я хотел. Горизонтальное выпадающее меню я не рассматриваю, вы сможете сделать это самостоятельно.

Настройка модуля ARI YUI Menu

Если вы хотите редактировать непосредственно файл стиля модуля, он располагается тут JOOMLA_ROOT/modules/mod_ariyuimenu/js/assets/menu/sam/safe_menu.css

Для управления направлением вылета выпадающих блоков в настройках модуля есть строка «Выравнивание подменю [?]». Описание на страничке разработчика YUI гласит: Массив определения того, как подменю должно быть согласовано с родительским пунктом меню. Формат: [itemCorner, submenuCorner]. По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню. Мой комментарий: Считайте что там по умолчанию написано tl,tr. Напишите туда то, что нужно вам.

Ответы на часто задаваемые вопросы

Как добавить атрибуты title в ссылки и иконки пунктов меню?

Найдите в файле следующую строку:

Сразу за ней вставьте следующие строки.

Далее найдите строку:

Загрузить файл с изменениями можно в конце статьи.

В CSS модуля необходимо добавить код для выравнивания текста относительно иконок
#<$id>.yui-skin-sam ul li a img

Как поменять курсор меню?

// Горизонтальное меню
#<$id>.yui-skin-sam UL LI A.yuimenubaritemlabel:hover

// Вертикальное меню
#<$id>.yui-skin-sam UL LI A.yuimenuitemlabel:hover

Как поменять цвет пункта меню над которым курсор мыши?

// Вертикальное меню
#<$id>.yui-skin-sam ul li.yuimenuitem-selected, #<$id>.yui-skin-sam ul li.yuimenuitem-active

Как поменять название и цвет шрифта?

Как вывести текст пункта меню в несколько строк?

«Стрелочка-треугольничек» наезжает на текст, как отодвинуть?

#<$id>.yui-skin-sam li.yuimenuitem-hassubmenu < padding-right: 15px; >
#<$id>.yui-skin-sam ul li a.yuimenuitemlabel < border-bottom: 0px; >
#<$id>.yui-skin-sam li.yuimenuitem

Как поменять цвет бордюра?

Как поменять цвет фона?

Как направить выпадение пунктов меню влево, а не вправо?

Эта опция представляет собою массив определения того, как подменю должно быть согласовано с родительским пунктом меню.

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

Комментарий от меня: Считайте что там по умолчанию написано tl,tr (сокращения top, bottom, left, right). Напишите туда то, что нужно вам.

Скачать русифицированный модуль выпадающего меню для joomla

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

Источник