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

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

Maxi Menu CK

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

SJ Flat Menu

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

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

JF Mobile Menu Module

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

Responsive Menu Module for Joomla

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

Данный модуль включает в себя множество функций, таких как выбор пользовательских цветов для фона меню и ссылок, 20 различных стилей шрифтов на выбор, закругленные или прямые углы и т.д. Хотите создать уникальное стилизованное меню с экстремальными цветовыми сочетаниями? Модуль Grue — это то, что вы ищете:

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

FREE Accordion Menu Joomla

Анимация в модуле меню для Joomla 3 создается с помощью библиотеки jQuery . В модуль включены готовые скины, и я решил сделать их на 100% настраиваемыми. Теперь пользователи могут редактировать цвета меню и изменять стиль шрифта:

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

Sticky Horizontal Bar Module Joomla

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

DJ-Menu

Это меню с анимированными эффектами mootools для Joomla 2.5 и 3.0 . Теперь можно легко управлять меню независимо от того, является ли оно анимированным или для него просто заданы стили CSS , без скриптов. DJ-Menu также является адаптивным. Модуль позволяет использовать в адаптивных шаблонах выпадающие меню и на небольших экранах:

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

jQuery Slide-Down-Box Menu for Joomla 2.5 & 3.x

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

RokNavMenu

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

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

jQuery Fly-Out Menu for Joomla 2.5

Простой в использовании модуль для создания меню, который поставляется с семью разными стилями цвета. Он использует библиотеку jQuery для эффекта плавного раскрытия меню. Легко настраивается и поддерживает многоуровневые меню (до 5 уровней ):

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

Меню ARI Ext

Модуль поддерживает вертикальное и горизонтальное меню Joomla 3 , два эффекта переходов. Он распространяется бесплатно по лицензии GPL .

Оценка на JED: в целом - 28 , функциональность - 50 , поддержка - 23 , документация - 28 .

BM Cool Menu - один из самых любимых моих бесплатных и безопасных модулей для CMS Joomla 3 . Мне нравится его простота и лаконичность, адаптивность (что нечасто встретишь в бесплатных вариантах) и возможность лёгкой донастройки вручную. В чистом виде это расширение меня не совсем устраивало, но при некоторой корректировке файла CSS проблем не осталось. Думаю, что невысокие оценки модуля в каталоге Joomla JED объясняются именно необходимостью его ручной донастройки. Это не так сложно, как кажется. Тем более, собственные настройки файла CSS я сохранил для себя и вас в отдельном файле.

Этот модуль идеально подойдёт тому, кто нуждается в простом адаптивном горизонтальном и полностью бесплатном меню на своём сайте с Joomla 3. Сразу скажу, что он поддерживает многоуровневые меню , но лично у меня на некоторых сайтах возникли определённые проблемы с этим. Пока я с ними не разбирался, так как нашёл другие варианты; но полагаю, что дело в конфликте библиотек jQuery - при желании это более чем решаемо. (Ниже расскажу, как я их решил. Дело вовсе не jQuery).Для одноуровневых меню модуль более чем оптимален. Я его использую на большинстве своих сайтов.

Демо модуля BM Cool Menu

Собственно демо этого модуля представлено в шапке данного сайта. Оно же продублировано в футере. Как работает это меню с многоуровневой структурой можно посмотреть здесь.

Настройки бесплатного модуля адаптивного меню BM Cool Menu

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

• Show Sub-menu Items - показывать подпункты или нет.
• Text color - цвет текста.
• Hover text color - цвет текста при наведении курсора мыши.
• Menu"s background - цвет фона меню.
• Background image - картинка в качестве фона (настройки в формате css)
• Show border - показывать рамку или нет.
• Border radius - радиус скругления углов в рамке.
• Border color - цвет рамки.
• Active background - цвет активного пункта меню.
• Load jQuery - подключать или нет библиотеку jQuery.

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

Ручная донастройка стилей BM Coll Menu

Теперь скажу пару слов о ручной донастройке модуля для создания адаптивного меню на Joomla 3 BM Cool Menu. Проблема у меня возникла, когда я решил полностью убрать скругление углов (border radius) и рамку (border color). После внесения соответствующих изменений в настройках модуля в админке на компьютере в развёрнутом режиме (во всю страницу) меню отлично отражало все эти изменения, однако на мобильных устройствах и в свёрнутом окне и рамка, и скругление сохранялись. К тому же модуль в сжатом виде неизменно поднимался наверх и закрывал собой часть другого модуля, находящегося выше. Мне хотелось настроить отображение меню так, чтобы все его пункты выравнивались по центру. Дело в том, что, например, на экране компьютера 4:3 всё выгледело вполне ровненько и пристойно, а вот на 16:9 меню прижималось влево и выглядело как-то не так. Ну и плюс ко всему мне отелось убрать светлую полоску, разделяющую между собой пункты меню.

Решение нашлось в изменении или комментировании некоторых строк в файле css модуля, который лежит по пути: /modules/mod_bm_cool_menu/assets/css/style.css . Старый файл я на всякий случай сохранил в нетронутом виде под именем old-style.css . А в новом внёс кое-какие изменения.

Выравниванию меню по центру

В классе .bm-cool-menu li я заменил float:left; на inline:block; (строка 29) и то же самое сделал в строке 37 класса .bm-cool-menu a . Также добавил в строку 10 класса .bm-cool-menu : text-align:center;

Убираю белую разделительную линию между пунктами меню

Для этого полностью комментирую строку 30. Для тех, кто забыл или никогда не знал, как это делается: /*border-right: solid thin #fcfcfc;*/

Дополнительная настройка отображения меню на мобильных

Чтобы меню не закрывало собой модуль (или логотип), находящийся выше, в классе .bm-cool-menu-trigger (строка 167 и ниже) я добавил отступ сверху: margin-top:10px;

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

Модифицированный мной файл style.css я выложил внутри архива с модулем по прямой ссылке . Он называется mystyle.css . В случае нежелания возиться с изменением стилей вручную вы можете использовать его, просто переименовав в style.css .

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

Меняю заглавие меню в мобильной версии

Ну и осталась одна совсем маленькая, но существенная деталь. Изменить слово Menu , написанное латиницей при просмотре страниц в мобильной версии или при сворачивании страницы в браузере в небольшое окошко. Можно было бы предположить, что изменения надо вносить в языковой файл - но вот нет. Оказывается надо поставить свой заголовок меню в файле по пути: /modules/mod_bm_cool_menu/tmpl/default.php (строка 14).

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

Решение проблемы с неработающим BM Cool Menu

Проблема, которую я имею ввиду, состоит в следующем: на некоторых сайтах у меня BM Cool Menu не раскрывало подпункты ни при наведении, ни при клике. Я долго думал, что имеет место некий конфликт скриптов. Когда нашлось время наконец-то разобраться с этим, то я увидел, что даже на абсолютно чистом, только установленном сайте Joomla 3 меню не раскрывалось. Тут-то мне и стало понятно, что дело вовсе не в каких-то конфликтах. Опытным путём и ценой огромного количества нервных клеток мне всё-таки удалось установить, что проблема с расворачиванием и отображением многоуровневого меню BM Cool Menu проявляется только в позиции Position-1 шаблона стандартного джумловского шаблона Protostar. Переставив этот модуль в любую другу позицию (например, banner), происходят чудеса - и он начинает работать.

Если же непременно нужно расположить меню в Position-1, то придётся слегка подкорректировать индексный файл шаблона Protostar (index.php в корне шаблона - /templates / protostar / index.php). Дело в том, что по умолчанию вывод этот позиции обёрнут в контейнер nav с родным классом меню Joomla 3 navigator. Удалив эту «обёртку» и заменив style с «none» на «xhtml», мы получаем позицию 1, в которой модуль BM Cool Menu начнёт работать так, как надо.

Итак, находим этот фрагмент:

nav class="navigation" role="navigation">

Удаляем 1 и 3 строку, а также заменяем во второй строке «none» на «xhtml». Вот и всё решение.

Ссылки BT Content Slider - модуля ленты новостей в виде слайдера

Официальное ДЕМО модуля BM Cool Menu

Страница модуля BM Cool Menu в официальном каталоге расширений Joomla

Официальный сайт модуля BM Cool Menu

Скачать модуль BM Cool Menu по прямой ссылке

Продолжаем знакомиться с администрированием 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.

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

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

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

От автора: приветствую Вас уважаемые читатели. Меню – это элемент, без которого не может обойтись ни один сайт в интернете, так как данный блок значительно упрощает навигацию и предоставляет доступ к основным страницам пользовательской части сайта. При этом если сайт достаточно сложен и содержит огромное количество страниц, количество ссылок меню, так же будет велико, а значит, для экономии свободного пространства, меню создают многоуровневым. Поэтому в данной статье мы поговорим о том, как создать выпадающее меню joomla 3.

По сути, функционал многоуровневого меню заложен в базовой версии Joomla, точно так же как и многоуровневые категории, менеджера материалов. Но, что касается вывода на экран выпадающего меню, здесь есть небольшая проблема, которая заключается в том, что в разных шаблонах одно и тоже многоуровневое меню будет отображаться по разному. К примеру, в стандартном шаблоне CMS Joomla – Photostar, многоуровневое выпадающее меню будет отображаться просто отлично, причем используя, абсолютно стандартный функционал.

В тоже время другой стандартный шаблон Beez3, вообще, на мой взгляд, не корректно отображает данное меню.

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

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

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

При этом для создания родительских ссылок меню, в поле “Родительский элемент” необходимо выбрать значение “Корневой пункт меню”. Как только все родительские элементы созданы, приступаем к созданию дочерних элементов.

Обратите внимание, что создавая дочернюю ссылку в поле “Родительский элемент” необходимо выбрать ранее созданный родительский пункт меню. Таким образом, дочерние элементы, будут формировать выпадающую часть меню, если конечно данная возможность поддерживается шаблоном. После добавления всех необходимых ссылок, в менеджере меню мы получим следующую структуру.

Итак, для CMS Joomla выпадающее меню, практически готово, осталось только создать модуль, который отобразит его в требуемой позиции шаблона. А значит, переходим в “Менеджер меню” и создаем новый модуль меню.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

Как Вы видите, для шаблона Photostar меню отлично отображается, но как сделать выпадающее меню в joomla 3, для другого шаблона спросите Вы. Ответ достаточно прост – использовать стороннее расширение. И в данной статье мы рассмотрим модуль под названием ARI Ext Menu .

Кликая по кнопке “Download” нас перенаправляют на сайт разработчика, где приведена ссылка для скачивания модуля.

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

Модуль достаточно функционален и содержит огромное количество различных настроек, на обзоре которых я сейчас не буду останавливаться, тем более что практически все они отвечают за внешний вид и требуют простого тестирования. Главное, необходимо указать заголовок, выбрать позицию отображения в шаблоне, изменить состояние на “Опубликовано” и в поле “Menu name” выбрать меню которое будет отображаться в модуле.

Собственно после сохранения мы увидим следующий результат.

То есть модуль успешно выполняет свою задачу.

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

На этом данная статья завершена! Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Для сайта любого уровня имеет большое значение то, насколько хорошо скомпонован его стиль, как все «склеено» воедино. Но в следующую же минуту, дизайн отходит на другой план, поскольку куда важнее становится то, насколько удобно организован интерфейс ресурса, как распределены материалы, насколько большая вероятность того, что с помощью меню можно добраться до любого раздела. И тогда сам владелец проекта уже должен думать о том, а действительно ли , которое предлагает разработчик шаблона настолько удобное, правильно ли и комфортно ли работать с поиском материалов, присутствует ли разделение тех же статей по категориям? Если данный аспект не доводить изначально до идеала, можно потерять тех посетителей, которые действительно могли бы принести вам прибыль, но просто не захотели иметь дело с непрофессиональным ресурсом, поскольку в ином случае, организация навигации по сайту была бы совсем другого уровня. Но не нужно думать, что только предоставленные в Joomla шаблон меню инструменты, становятся тем пределом, с которым придется работать. Для совершенствования структуры и навигации вашего проекта, можно легко использовать расширения, например Joomla модуль меню , способные внести очень значимые изменения в этот сегмент.

Конкретные предложения по доработке меню

Что же нам могут предложить расширения, которые находятся в этой категории? В первую очередь – это разнообразные меню. Самое интересное, что разработчики заботятся не только об удобной настройке и работе этих решений, а еще и о том, как они смотрятся. Для этого применяется анимация, предоставляются подборки цветов, разного рода шрифтов для меню, а также для них подготавливаются наборы иконок. Что еще лучше, здесь вы найдете варианты с поддержкой различного количества уровней, а это уже открывает дорогу к созданию серьезных систем навигации, благодаря которым можно через один Joomla пункт меню , попасть в любой раздел сайта, или даже какую-то категорию. Еще интереснее смотрятся варианты с использованием изображений, которые символизируют каждый пункт меню, такие дополнения уже есть в списке имеющихся у нас. Выбирайте Joomla выпадающее меню , специальные мега – меню, с огромными возможностями, а также аккордеон – меню Joomla 3 , имитирующие сворачивание обычного аккордеона для размещения содержимого. Но помимо таких предложений, данная категория имеет еще немало интересных разработок.

Создание категорий и прочего

Само собой, что используя различные тематические направления, нужно обеспечивать посетителям прямой доступ к нужным материалам, притом желательно сделать каждую категорию соответствующей её наполнению. Если тот формат, в котором ваш стандартный интерфейс выводит категории, вам не нравится, можно использовать соответствующие расширения. Для этого у нас вы найдете решения, выводящие категории в виде, подобном выпадающему меню, те, которые специально устанавливаются для сотрудничества с К2, или просто организовывают удобный доступ к подборкам контента, соответствующего определенной теме. В итоге, даже вам будет комфортнее работать со своим проектом, изначально распределяя новые поступления по «полочкам», ведь и поиск, и корректировка таких материалов становится удобней.

Сделайте перемещение по сайту действительно удобным

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