Хорошее меню для joomla 3. Как сделать меню в Joomla, три способа создания меню в Joomla

Телефон

Оценка на 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 по прямой ссылке

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

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

Maxi Menu CK

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

SJ Flat Menu

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

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