На этом уроке, посвящённом модулям Joomla, я покажу отличный модуль для показа меню на страницах сайта.
Где лежит?
Каталог модуля «Меню» лежит в каталоге /modules/mod_menu корневой папки сайта. В каталоге стандартные файлы для системных модулей:
- Каталог tmpl;
- Файлы helper.php;
- mod_menu.php;
- mod_menu.xml.
Зачем нужен?
Модуль Меню на Joomla сайте нужен, чтобы показать в любой выбранной позиции модулей любое, ранее сделанное меню сайта.
Данный модуль не подхватывать стиль выпадающего меню и будет показывать пункты меню в виде списка. Это значит, что использование этого модуля в позиции шаблона для основного меню, НЕ даст выпадающего меню, а покажет пункты меню списком.
Напомню, чтобы создать выпадающее меню сайта нужно в настройках шаблона указать, какое меню вы выбрали основным.
Как создать?
Для создания модуля меню вы должны иметь соответствующие права. По умолчанию этот модуль может создать только суперадминистратор.
- Из основного меню административной панели идём на вкладку Модули;
- В тулбаре вкладки жмём кнопку «Создать»;
- Из списка типов модулей выбираем тип Меню;
- Заполняем настройки модуля меню на 4-х вкладках. Сохраняемся;
- Всё меню создано, после чистки кэша сайт оно покажется на сайте.
Настройки модуля меню Joomla
Посмотрим на 4 вкладки настроек модуля меню.
Вкладка 1 - Модуль
Основная вкладка настроек. Здесь
Обязательно заполняем название модуля;
Если хотите скрыть название модуля, сразу скрываете его в настройке справа «Показывать заголовок»;
В полях настроек нужно: выбрать само меню, которое хотите показать (1), выбрать базовый пункт меню (2), указать начальный (3) и конечный пункт меню (4), и определиться с показом подпунктов меню (5).
Настройкой (2) вы можете перемещать меню в пределах базового меню при сложной структуре сайта. Если вы брать рекомендованный текущий пункт меню, то в качестве базового будет выбрано ближайший старший активный пункт меню.
Указание начального (3) и конечного (4) пункта меню позволяет сокращать длинные меню, сложной структуры сайта. Аналогичное назначение у настройки показ подпунктов меню (5).
В правой части вкладки обязательно заполняем показ заголовка (6), состояние (8) и позицию в шаблоне (7). Остальные настройки по желанию.
class="eliadunit">
Интересны поля «Порядок», здесь вы сразу можете ранжировать создаваемый модуль в модулях этой позиции. Это можно сделать и в таблице модулей перетаскиванием модуля.
«Примечание» создается для администраторов сайта и видно в таблице модулей.
«Начало публикации» позволит запланировать выход модуля по дате.
Вкладка 2 - Привязка
Здесь вы должны выбрать, на каких страницах сайта будет данный модуль показываться. По умолчанию стоит настройка «На всех страница».
Выбор страниц показа осуществляется по пунктам меню из фильтра «На всех …», «Ни на одной», «Только на указанных», «На всех кроме указанных».
Например, вы хотите показать создаваемый модуль только на главной странице. Для этого в фильтре выбираете «Только на указанных» и в списке меню выделяете чек, только меню главной страницы (избранных материалов).
Вкладка 3 - Дополнительно настройки
Здесь вы можете задать уникальный внешний вид модуля, если в вашем шаблоне есть дополнительные стили модулей или вы сами создали такие стили для модулей.
Можно поступить наоборот. Здесь указать любой свой «Суффикс класса меню» и «Суффикс CSS-класса модуля», а потом добавить к этому модулю своё CSS правило.
В отличие от настроек других модулей, здесь есть смена стилей Java Script выпадающего меню (Позиция назначения).
Вкладка 4 - Права
Заполняются для многопользовательских сайтов с количеством администраторов больше одного.
После заполнения всех полей модуль меню на Joomla сайте нужно сохранить и после чистки кэша посмотреть ан сайте.
Вывод
В этом уроке мы рассмотрели модуль Меню на Joomla сайте. Очень полезен для создания полноценного футера сайта с дополнительными меню технической и информационной навигации.
Формат меню имеет значение. Есть разница между тем, горизонтальное у вас меню или вертикальное.
Так, для мобильных браузеров лучше использовать адаптивного вертикальное меню. Зато на компьютерах куда естественнее смотрится горизонтальное навигационное меню — оно выглядит главнее вертикального.
В данной статье мы разберем как сделать именно такое, «главное», меню при помощи стандартных опций Joomla, а также при помощи подборки лучших расширений.
Как сделать меню горизонтального формата в Joomla
Горизонтальное меню — это не анимационное, не многоуровневое, не выпадающее меню, потому сделать его проще простого. Вам необходимо всего лишь слегка изменить текущие настройки элемента меню в админке. Вот пошаговая инструкция как это сделать:
- Проходите в административную панель, авторизуетесь.
- Далее переходите в «Менеджер расширений» и там выбираете пункт «Модули».
- Чтобы увидеть установленные модули, откройте «Модули сайта». Там появится ваше расширения элемента меню.
- Жмете «Изменить».
- Переходим во вкладку «Подробности» и указываем позицию в шаблоне — то есть где будет размещен модуль.
- А во вкладке «Параметры» задаем стиль «Горизонтальное меню».
- Сохраняем нововведения.
Теперь ваше меню появится на сайте и будет иметь горизонтальный формат. Не забудьте в админке Joomla добавить пункты для меню, иначе оно останется пустым.
https://www.youtube.com/watch?v=vhmPQnWFaeU&spfreload=10
Модуль DJ-Menu позволит вам «миксануть» в навигации одновременно и выпадающее, и горизонтальное, и анимированное меню. Это удобный, мощный и современный модуль для Joomla для создания качественной менюшки. Распространяется расширение как платно, так и бесплатно. В платной версии есть дополнительные возможности: больше эффектов, умное управление уровнями и т. д. А вот возможности бесплатной версии расширения DJ-Menu:
- можно редактировать CSS для изменения стиля отображения;
- анимационное эффекты можно включить или выключить;
- вы можете прописать в CSS ID вашего div-шаблона, чтобы модуль привязался к заданному стилю;
- можно создать как горизонтальное, так и вертикальное меню.
jQuery Slide-Down-Box Menu
Данный модуль подходит для Joomla 2.5 и 3.5. Суть работы расширения в использовании библиотек jQuery, за счет которых обеспечивается анимационный эффект модуля. Это расширение идеально подходит для сайтов, где критически не хватает анимации. Учтите, что у модуля особенная настройка. Вот инструкция:
- Скачайте модуль и установите в Joomla через вкладку «Менеджер расширений».
- Активируйте или деактивируйте загрузку библиотеки jQuery. Учтите, что если у вас уже имеется модуль или плагин, который использует эту библиотеку, тогда функцию необходимо деактивировать.
- Определите ширину модуля. По умолчанию установлен параметр 960 пикселей.
- Укажите число пунктов меню для первого уровня. Если используете стандартную ширину меню, то лучше указать до 7 пунктов.
- Опубликуйте созданное горизонтальное меню в доступной позиции в шаблоне Joomla.
В остальном вы и сами сможете разобраться. Добавление пунктов осуществляется стандартным образом. Вы сможете выбирать для пунктов иконки или целые изображения. Учтите, что модуль поддерживает до 2-х уровней подпунктов.
Хоть данный модуль и идет в комплекте с шаблоном Joomla от RocketTheme, но его можно использовать как самостоятельное расширение. Модуль позволит вам сделать мощное, анимированное, плавное и адаптивное горизонтальное меню за очень короткие сроки. Огромное преимущество RokNavMenu — понятная даже ребенку настройка. В два счета вы сможете создать потрясающее меню из иконок, картинок и целых галерей. И, что самое важное, RokNavMenu можно скачать бесплатно и пользоваться расширением без каких-либо ограничений!
Sticky Horizontal Bar Module Joomla
По мнению некоторых маркетологов, данный плагин способен увеличить конверсию вашего сайта на 30 %. Под словом «конверсия» подразумевается уменьшение числа отказов, то есть люди будут чаще кликать на ваше меню и делать от двух переходов на сайте. Sticky Horizontal Bar Module Joomla позволит вам сделать красивое меню, по которому будет жалко не кликать.
Установка расширения ничем не отличается от типовой, потому загрузите модуль через «Менеджер расширений» в админке. Хорошая особенность модуля — это возможность полностью изменять оформление, не затрагивая при этом CSS. Вы сможете редактировать цвет, шрифт, размеры, тип отображения и много другео прямо в настройках. Единственный минус модуля — это надобность создавать отдельную позицию в шаблоне, так как не во всех местах расширение будет корректно работать.
Изначально модуль Candy позволял делать исключительно вертикальное меню. Но по многичисленным просьбам пользователей разработчик все же решил выпустить новую горизонтальную версию модуля. Большой плюс новой версии Candy — это независимая работа даже при отключенном JavaScript в браузере. Вы сможете создать менюшку с различными эффектами, которые будут нормально отображаться в любом браузере. Candy Horizontal Menu легко устанавливается и так же просто настраивается, так что у вас не должны возникнуть вопросы во время пользования модулем.
На этом обзор самых популярных модулей для горизонтального меню завершается. Но не завершаются возможные способы создания менюшки. Продолжайте свои исследования и вы обязательно станете экспертом Joomla!
От автора: приветствую Вас дорогой друг. В данной статье мы с Вами поговорим о том, как создается вертикальное меню для joomla 3. Конечно, тема не новая и уже несколько раз рассматривалась в статьях нашего сайта и скорее всего Вы отлично знаете, как реализуется данный элемент. Но так как меню, это важнейший блок любого хорошего веб-сайта, думаю совсем не лишним будет, рассмотреть парочку дополнительных расширений, благодаря которым очень легко сформировать данный навигационный блок.
Итак, как было сказано выше в данной статье, мы с Вами рассмотрим два достаточно интересных модуля, которые формируют в CMS Joomla вертикальное меню. А значит, первый модуль который мы рассмотрим – это Simple Responsive Menu.
Традиционно на странице описания текущего расширения, кликаем по кнопке “Download” для перехода на официальный сайт разработчика.
На момент написания данной статьи, последняя актуальная версия – 1.10, соответственно ее и скачиваем, используя кнопку “Download Now”. После скачивания, как обычно устанавливаем модуль. Используя менеджер расширений Joomla.
Обратите внимание, что модуль выводит на экран конкретное меню, а значит, Вам необходимо его создать перед публикацией модуля. Далее переходим в менеджер модулей.
И переходим на страницу настройки только что установленного модуля.
В параметре “Select menu” выбираем меню, пункты которого будут отображаться в качестве контента модуля. Если меню многоуровневое, то есть содержит как родительские так и дочерние ссылки, значит в параметре “Show Sub-menu Items”, необходимо указать “Да”, в этом случае будут отображаться на экран подпункты. Так же, используя параметры “Start level” и “End Level”, Вы можете определить начальный и конечный уровень вложенности ссылок, то есть те уровни, которые будут отображены на экране. И наконец, выбираем позицию для вывода модуля на экран, указываем на каких страницах он будет доступен и определяем статус “Опубликовано”.
Теперь перейдем в пользовательскую часть для проверки результатов.
Как Вы видите, расширение отлично работает. При этом в модуле добавлена адаптивность, то есть при определенном размере экрана, контент модуля сворачивается в выпадающий список, тем самым значительно экономиться используемое место экрана.
Параметры, отвечающие за адаптивность содержатся на вкладке “Responsive Options”, страницы настройки текущего модуля. Теперь переходим к следующему модулю, под названием Joombig Menu Tree .
Данный модуль отображает на экран вертикальное меню, вид которого очень похож на дерево каталогов и файлов операционной системы Windows. Как обычно кликаем по кнопке “Download” для перехода на официальный сайт разработчика.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Теперь переходим на страницу настройки только что установленного модуля.
Параметры доступные для настройки:
Enable/Disable jQuery – подключить собственную библиотеку jQuery;
Width of module(%) – ширина модуля в процентах;
Margin – внешние отступы;
Select Menu – выбор меню отображаемого модулем;
Show/Hide Title Directory – показать или же скрыть заголовок родительского каталога (строка котрая будет отображаться над всеми пунктами меню)
Title directory – заголовок пункта верхнего уровня;
Start Level – начальный уровень показа многоуровневого меню;
End Level – конечный уровень показа многоуровневого меню;
Show Sub-menu Items – показывать ли вложенные пункты меню.
После публикации модуля, переходим в пользовательскую часть для проверки результатов.
Вообще модуль меню это достаточно не сложный модуль, который по большому счету можно создать самостоятельно, но для этого необходимо знать API CMS Joomla. Поэтому если Вы желаете научитсья создавать свои собственные расширения, которые в полной мере будут решать поставленные задачи, Вам будет полезен наш курс Joomla-Профессионал. Создание расширений для Joomla.
На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Для сайта любого уровня имеет большое значение то, насколько хорошо скомпонован его стиль, как все «склеено» воедино. Но в следующую же минуту, дизайн отходит на другой план, поскольку куда важнее становится то, насколько удобно организован интерфейс ресурса, как распределены материалы, насколько большая вероятность того, что с помощью меню можно добраться до любого раздела. И тогда сам владелец проекта уже должен думать о том, а действительно ли , которое предлагает разработчик шаблона настолько удобное, правильно ли и комфортно ли работать с поиском материалов, присутствует ли разделение тех же статей по категориям? Если данный аспект не доводить изначально до идеала, можно потерять тех посетителей, которые действительно могли бы принести вам прибыль, но просто не захотели иметь дело с непрофессиональным ресурсом, поскольку в ином случае, организация навигации по сайту была бы совсем другого уровня. Но не нужно думать, что только предоставленные в Joomla шаблон меню инструменты, становятся тем пределом, с которым придется работать. Для совершенствования структуры и навигации вашего проекта, можно легко использовать расширения, например Joomla модуль меню , способные внести очень значимые изменения в этот сегмент.
Конкретные предложения по доработке меню
Что же нам могут предложить расширения, которые находятся в этой категории? В первую очередь – это разнообразные меню. Самое интересное, что разработчики заботятся не только об удобной настройке и работе этих решений, а еще и о том, как они смотрятся. Для этого применяется анимация, предоставляются подборки цветов, разного рода шрифтов для меню, а также для них подготавливаются наборы иконок. Что еще лучше, здесь вы найдете варианты с поддержкой различного количества уровней, а это уже открывает дорогу к созданию серьезных систем навигации, благодаря которым можно через один Joomla пункт меню , попасть в любой раздел сайта, или даже какую-то категорию. Еще интереснее смотрятся варианты с использованием изображений, которые символизируют каждый пункт меню, такие дополнения уже есть в списке имеющихся у нас. Выбирайте Joomla выпадающее меню , специальные мега – меню, с огромными возможностями, а также аккордеон – меню Joomla 3 , имитирующие сворачивание обычного аккордеона для размещения содержимого. Но помимо таких предложений, данная категория имеет еще немало интересных разработок.
Создание категорий и прочего
Само собой, что используя различные тематические направления, нужно обеспечивать посетителям прямой доступ к нужным материалам, притом желательно сделать каждую категорию соответствующей её наполнению. Если тот формат, в котором ваш стандартный интерфейс выводит категории, вам не нравится, можно использовать соответствующие расширения. Для этого у нас вы найдете решения, выводящие категории в виде, подобном выпадающему меню, те, которые специально устанавливаются для сотрудничества с К2, или просто организовывают удобный доступ к подборкам контента, соответствующего определенной теме. В итоге, даже вам будет комфортнее работать со своим проектом, изначально распределяя новые поступления по «полочкам», ведь и поиск, и корректировка таких материалов становится удобней.
Сделайте перемещение по сайту действительно удобным
Когда проект оснащается удобным меню, когда на странице четко распределены категории, и даже не используя поиск можно найти занимательный для себя материал – с таким ресурсом хочется работать. К тому же, как и говорилось выше, все нынешние разработки направлены еще и на то, чтобы своим стилем исполнения привлечь внимание, ведь без этого тоже нельзя. Так что если вас не устраивает стандартный устрой основных элементов навигации на сайте, используйте расширения из этой категории чтобы сделать меню Joomla идеальным для вас.
От автора: приветствую Вас уважаемые читатели. Меню – это элемент, без которого не может обойтись ни один сайт в интернете, так как данный блок значительно упрощает навигацию и предоставляет доступ к основным страницам пользовательской части сайта. При этом если сайт достаточно сложен и содержит огромное количество страниц, количество ссылок меню, так же будет велико, а значит, для экономии свободного пространства, меню создают многоуровневым. Поэтому в данной статье мы поговорим о том, как создать выпадающее меню joomla 3.
По сути, функционал многоуровневого меню заложен в базовой версии Joomla, точно так же как и многоуровневые категории, менеджера материалов. Но, что касается вывода на экран выпадающего меню, здесь есть небольшая проблема, которая заключается в том, что в разных шаблонах одно и тоже многоуровневое меню будет отображаться по разному. К примеру, в стандартном шаблоне CMS Joomla – Photostar, многоуровневое выпадающее меню будет отображаться просто отлично, причем используя, абсолютно стандартный функционал.
В тоже время другой стандартный шаблон Beez3, вообще, на мой взгляд, не корректно отображает данное меню.
Причем дочерние пункты появляются только тогда, когда пользователь кликнет по родительскому элементу. Помимо этого в джумла выпадающее меню, можно реализовать при помощи специальных расширений, которые опираясь на данные менеджера меню, правильным образом отображают ссылки многоуровневого меню.
Поэтому для начала давайте определим структуру ссылок будущего меню, а затем поговорим о его отображении на экран. Итак, переходим в менеджер меню и создаем новое меню.
На следующей странице указываем заголовок меню, его системное имя, краткое описание и нажимаем кнопку “Сохранить”.
При этом для создания родительских ссылок меню, в поле “Родительский элемент” необходимо выбрать значение “Корневой пункт меню”. Как только все родительские элементы созданы, приступаем к созданию дочерних элементов.
Обратите внимание, что создавая дочернюю ссылку в поле “Родительский элемент” необходимо выбрать ранее созданный родительский пункт меню. Таким образом, дочерние элементы, будут формировать выпадающую часть меню, если конечно данная возможность поддерживается шаблоном. После добавления всех необходимых ссылок, в менеджере меню мы получим следующую структуру.
Итак, для CMS Joomla выпадающее меню, практически готово, осталось только создать модуль, который отобразит его в требуемой позиции шаблона. А значит, переходим в “Менеджер меню” и создаем новый модуль меню.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
При настройке модуля, указываем его заголовок, выбираем позицию отображения в шаблоне и страницы, на которых он будет доступен, и не забываем выбрать отображаемое меню в поле “Выбор меню”.
После сохранения модуля переходим в пользовательскую часть для проверки.
Как Вы видите, для шаблона Photostar меню отлично отображается, но как сделать выпадающее меню в joomla 3, для другого шаблона спросите Вы. Ответ достаточно прост – использовать стороннее расширение. И в данной статье мы рассмотрим модуль под названием ARI Ext Menu .
Кликая по кнопке “Download” нас перенаправляют на сайт разработчика, где приведена ссылка для скачивания модуля.
После скачивания, устанавливаем расширение стандартным способом и переходим в менеджер меню для его активации.
Модуль достаточно функционален и содержит огромное количество различных настроек, на обзоре которых я сейчас не буду останавливаться, тем более что практически все они отвечают за внешний вид и требуют простого тестирования. Главное, необходимо указать заголовок, выбрать позицию отображения в шаблоне, изменить состояние на “Опубликовано” и в поле “Menu name” выбрать меню которое будет отображаться в модуле.
Собственно после сохранения мы увидим следующий результат.
То есть модуль успешно выполняет свою задачу.
Теперь Вы знаете, как в джумле сделать выпадающее меню. Если Вы желаете более подробно изучить структуру модулей на уровне кода, Вам будет полезен наш новый курс .
На этом данная статья завершена! Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
