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

Меню — обязательная составляющая любого сайта Joomla. Создание навигации сайта — это одни из первых шагов перед публикацией веб-ресурса в Интернете. Без меню ваш проект не будут уважать ни посетители, ни поисковики.

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

В данной статье разберем, как происходит создание меню различного формата (многоуровневое, вертикальное, горизонтальное и т. д.). Кроме того, разберем особенности генерации пункта, а также вы узнаете, какой бывает тип составляющих меню и что такое суффикс класса. Кроме того, вам будет представлена небольшая подборка из 4 расширений, которые обеспечат быстрое создание меню.
https://www.youtube.com/watch?v=u19ebn-5W40

Как происходит создание меню Joomla вручную

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

Чтобы начать создавать меню, для начала зайдите в админку Joomla. А еще лучше заранее продумайте, из чего будет состоять ваша навигация вплоть до пункта. Также решите, какой тип больше подходит для ваших целей: многоуровневое, вертикальное или т. д. После того, как все обдумаете, зайдите в админпанель, а затем откройте вкладку «Меню». Далее вам необходимо добраться до пункта «Менеджер меню» и нажать в выпадающем списке кнопку «Создать меню». После этого начнется непосредственное создание навигации — вам нужно будет указать основные параметры для этого. Основные требования — это прописать заголовок и тип меню. Учтите, что тип навигации — это условное название для вашего удобства.
https://www.youtube.com/watch?v=34CARMpcNHM
Теперь нажмите на «Сохранить и закрыть». На этом создание меню не завершится, так как у него нет ни одного пункта. Для генерации пункта вам необходимо перейти в управление созданным меню навигации. В открывшейся вкладке вы увидите раздел «Пункты меню». Переходите в эту вкладку и создаете составляющие для навигации сайта Joomla. Вам нужно будет так же, как и с меню, указать название пункта. Кроме того, необходимо будет указать тип пункта. В этот раз тип будет иметь значение, так как повлияет на отображение пункта. Чаще всего включают тип «Материалы».

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

  1. nav nav-pills — суффикс класса для горизонтального меню, который создает стандартное оформление «pills» для навигации.
  2. nav nav-tabs — суффикс класса для горизонтального меню, который создает «табовое» оформление навигации.
  3. nav nav-pills nav-stacked — аналогичный первому суффикс класса, только для вертикальной навигации.
  4. nav nav-tabs nav-stacked — «табовое» вертикальное меню.
  5. nav nav-list — суффикс класса для развернутого списком вертикального меню.

Модуль Ari Ext Menu

Ari Ext Menu — модуль, который обеспечит создание вертикального либо горизонтально меню в Joomla с эффектом анимации. Расширение Ari Ext устанавливается стандартным образом. Чтобы задать эффект анимации, в настройках Ari Ext меняем строку Transittion type для добавления «исчезновения» или «слайда». Модуль можно настроить по своему усмотрению при помощи редактуры CSS-файла. Ari Ext позволяет создавать многоуровневое меню. Единственный минус Ari Ext — это отсутствие русскоязычной версии, потому вам придется самостоятельно разбираться в настройках расширения. В остальном Ari Ext справляется отлично!

Модуль SJ Flat для Joomla

SJ Flat — простой и удобный модуль, который позволит вам создавать красивые и функциональные менюшки. Основная ориентация SJ Flat — это многоуровневое меню. Модуль SJ Flat позволит вам создавать сколько угодно подкатегорий для различных пунктов меню в Joomla. Кроме того, SJ Flat прекрасно работает со всплывающим меню и для вертикального, и для горизонтального расположения. Еще одно преимущество SJ — это автоматическая адаптация под мобильные устройства. Горизонтальное меню будет переходить в вертикальное при включении сайта через мобильное устройство с маленьким разрешением. И самое главное достоинство SJ Flat — модуль можно скачать бесплатно!

Модуль Vertical Menu

Название модуля Vertical Menu говорит само за себя — это расширение необходимо для создания вертикального навигационного меню. Основная особенность модуля Vertical Menu, помимо простой установки и легкой настройки, — это дружественный SEO-код. Данное расширение оптимизировано, чтобы меню помогло вам в продвижении сайта. Вы сможете выбрать различные варианты оформления в модуле Vertical от типа шрифта до цветовой гаммы отображаемого меню.
https://www.youtube.com/watch?v=frwWrSzeO5s

Модуль Mega menu

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

От автора: приветствую Вас уважаемые читатели. Меню – это элемент, без которого не может обойтись ни один сайт в интернете, так как данный блок значительно упрощает навигацию и предоставляет доступ к основным страницам пользовательской части сайта. При этом если сайт достаточно сложен и содержит огромное количество страниц, количество ссылок меню, так же будет велико, а значит, для экономии свободного пространства, меню создают многоуровневым. Поэтому в данной статье мы поговорим о том, как создать выпадающее меню 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 идеальным для вас.

Обзор будет проходить в последней, на момент написания статьи (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 аналогична настройке любого другого меню:

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

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

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

  1. Настройки модуля меню Joomla (в менеджере модулей). Тип «DJ-MegaMenu».
  2. Настройки модуля кнопки мобильного меню (в менеджере модулей). Тип «DJ-MegaMenu - Mobile Menu Button».
  3. Настройки каждого пункта меню в менеджере меню 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, то достаточно в настройках модуля, для опций Тема (вкладка ) и Тема мобильного меню (вкладка ) выбрать вариант переопределить из шаблона .

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