Как сделать горизонтальное меню в joomla 3 (joomla 3.5)
Разберём стандартный путь – работа с базовыми расширениями joomla.
1. Создаём новое меню. Для этого нужно зайти в менеджер меню.
Нажать кнопку «Создать», в левом верхнем углу страницы.
И заполнить поля:
• заголовок – по нему мы всегда сможем найти своё меню в длинном списке других созданных нами модулей;
• тип меню – зададим говорящее название– topmenu (как известно в Joomla 3 предусмотрено 2 стандартных меню: mainmenu, обычно вертикальное боковое, и горизонтальное topmenu);
• описание – строка не обязательная для заполнения, но помогает ориентироваться во множестве созданных модулей.
Не забываем сохранять результат.
2. Создаём для нового меню модуль. Нажимаем соответствующую кнопку напротив нового меню и заполняем форму.
Главное ввести аналогичный заголовок и выбрать нужную позицию (Обычно используют «Top [ position-1]», но вы можете выбрать любую вам подходящюю).
3. Затем выбираем вкладку «Дополнительные параметры» и вводим в строку «суффикс класса меню» следующее – « nav-pills» с обязательным пробелом перед введением слов nav-pills . Сохраняем внесённые изменения.
4. Создаём пункты, чтобы проверить наглядно, как работает модуль горизонтального меню для joomla 3. Возвращаемся в менеджер меню и выбираем «Пункты меню».
Далее «Создать» страницу. Например, «Главная», «Контакты», «Статьи», «Новости», «Каталог».
Прежде чем создавать тот или иной тип пункта, например, материалы, нужно, чтобы в Joomla нужный материал уже был добавлен. Иначе тип пункта «Материалы» создать не удастся. Тоже касается и контактов, ссылок, лент новостей.
Теперь можем посмотреть, какое горизонтальное меню у нас получилось.
Настройка меню
Базовый компонент меню в Joomla 3 можно изменять на своё усмотрение:
- создавать разные пункты меню (материалы, контакты, ссылки, ленты новостей и прочие);
- назначать один из пунктов главной страницей;
- а также изменять базовые стили.
Назначать пункт главной странице просто. В списке опубликованных пунктов нужно просто нажать на звёздочку напротив названия.
Стили, в отличие от предыдущих версий Joomla , проработаны хорошо, но только в шаблоне Protostar.
1) Проверим, установлен ли он у вас. Для этого зайдите в расширения, а далее в менеджер шаблонов (В админке вкладка «Расширения»). Если он есть в списке и напротив стоит жёлтая звёздочка, значит этот шаблон используется по умолчанию.
1) Переходим к модулю нашего горизонтального меню, в нем вкладка » Дополнительные параметры» — ранее уже редактировали . В нём уже задана позиция и суффикс класса. Как раз последний мы и будем менять, вставляя разные базовые значения:
Специализированные модули
Итак, мы научились создавать модуль горизонтального меню для joomla 3, настраивать, создавать пункты и менять стили оформления. А что если это меню не вписывается в цветовую гамму оформления сайта или вообще нарушают целостную картину? Всегда можно установить дополнительный модуль. На просторах интернета множество бесплатных и недорогих полезных разработок.
Модуль Za Horizontal & Vertical
Подходит для Joomla 3 и 2.5. С его помощью можно создавать вертикальные и горизонтальные меню, а также многоуровневые (неограниченное количество подменю). Совместим со всеми популярными браузерами. Содержит 5 анимированных стилей оформления. Можно регулировать продолжительность анимации, менять цветовые схемы, шрифт и двигать границы. Позиционируется разработчиками как гибкий и простой модуль. К сожалению, не бесплатный.
BM Cool Menu
Любимый многими веб-разработчиками модуль, бесплатный и безопасный. Создавался для Joomla 3. Простой в использовании, адаптивный. Поддерживает многоуровневые меню. Можно донастраивать вручную, если знать, как (через CSS ).
SJ Flat Menu
Профессиональная разработка для Joomla 3 и 2.5. Это мощный адаптивный модуль, показывает многоуровневое меню в оригинальном стиле. Оформлением можно менять: в виде акк ордео на или всплывающих пунктов в вертикальном (левом или правом) и горизонтальном меню. Множество параметров доступно для изменения. На мобильных устройствах автоматически переключается с горизонтального на вертикальный тип.
ARI Ext Menu
Для создания горизонтального выпадающего меню в Joomla 3. Поддержка планшетных, мобильных устройств. Адекватно отображается во всех браузерах. Не грузит страницу. Прост в использовании. Находится в свободном доступе.
MAXI Menu CK
Для Joomla 3 и 2.5. Мощный и SEO -оптимизированный модуль, позволяет создавать горизонтальное и вертикальное выпадающее меню. Адаптивный дизайн. Красивые эффекты. Функционал демо-версии ограничен. В полной платной версии имеются пакеты различного оформления и тем, плагины лёгкого управления и корректного отображения на мобильных устройствах.
Итак, мы смогли создать горизонтальное меню для joomla 3, с помощью базового расширения, поменяли в нём стили, и расмотрели несколько специальных сторонних разработок для улучшения вашего меню.
Источник
Мега меню для joomla
Мега меню — это многофункциональный модуль горизонтального меню для Joomla, способный наделить меню на вашем сайте самым расширенным функционалом.
Есть один очень хороший и многофункциональный модуль меню для Joomla. Называется данный модуль JUX Mega Menu.
Восхвалять его возможности можно долго.
Модуль JUX Mega Menu
Возможности данного меню, которые все как один относятся к плюсовым характеристикам:
- Он лёгкий и очень шустрый;
- Множество настроек как в модуле, так и в пункте меню;
- Выбор горизонтального или вертикального отображения;
- При прокручивании страницы, меню может залипать вверху или внизу экрана (задаётся в настройках);
- Выводит модули в пунктах меню;
- Выпадание субменю вниз или вверх, с настройками скорости выпадания;
- Вывод подпунктов меню в заданном количестве колонок:;
- Поддерживаются изображения для пунктов меню;
- Работает на joomla
- и много других возможностей.
Настройка Мега меню
Чтобы вывести мегаменю на сайте, вам необходимо зайти в менеджер модулей (Расширения → Менеджер модулей) и нажать кнопку Создать новый модуль.
В открывшейся вкладке Тип модуля, выбрать пункт JUX Mega Menu, после чего попадаем в настройки модуля.
Хочу обратить ваше внимание, что настройки осуществляются в двух разных местах:
- в настройках модуля
- и в настройках пункта меню.
В настройках модуля: выбор выводимого меню, выбор позиции, цветовая тема, отображение на всех или только на заданных страницах, ориентир отображения (горизонтально или вертикально), уровни отображения пунктов, выравнивание, направление для выпадания, отзывчивость, залипание и некоторые другие.
В настройках пункта меню: содержимое подменю (можно вывести любой модуль или всю позицию из шаблона), подсказка (всплывающий текст при наведении мышкой на пункт меню), вывод субменю, его тип и размеры, количество столбцов для субменю.
Источник
Joomla 3.x. Как работать с «Ice Mega menu»
Из этого туториала Вы узнаете, как работать с Ice Mega menu в Joomla 3.x.
На скриншоте ниже Вы можете видеть, что пункт меню «Домашняя страница» (Home menu) является родительским, остальные пункты меню являются подменю «Домашней страницы»:
Это меню отображается при помощи модуля IceMegaMenu. Вы можете найти данный модуль во вкладке Расширения -> Менеджер модулей (Extensions -> Module manager) в вашей админ панели Joomla:
Откройте модуль IceMegaMenu. Самой важной опцией является Выбрать меню ( Select Menu ). Эта опция определяет, какое меню Joomla будет использовать данный модуль:
Перейдите на вкладку Меню (Menu) и откройте соответствующее меню. В нашем случае это Главное меню (Main Menu). Вы можете открыть его, перейдя на вкладку Меню -> Главное меню (Menus -> Main menu). Вы можете видеть родительский элемент меню Главная страница (Home) и его подменю:
Откройте меню. Мы открыли меню Домашняя страница (Home). Перейдите в раздел Параметры IceMegaMenu (IceMegaMenu Parameters). Здесь вы можете отрегулировать настройки MegaMenu. Вы можете установить количество колонок для подменю, ширину выпадающего меню, ширину колонки и число элементов в колонке:
В поле Ширина колонки (Column Width) Вы можете указать ширину для каждой колонки в процентах. Мы можем видеть 5 колонок. Изменим ширину первой и последней колонки. Мы изменили значения с 17.5%, 17.5%, 17.5%, 17.5%, 30%, 100% на 10%, 17.5%, 17.5%, 17.5%, 37.5%, 100% и сохранили изменения:
Обновите страницу, чтобы увидеть изменения в меню. Мы можем видеть, что ширина первой и последней колонки изменилась (скриншот ниже показывает это):
Давайте изменим настройки для меню О нас (About):
Откройте это меню в менеджере меню. Откройте секцию Параметры IceMegaMenu (IceMegaMenu Parameters). Мы можем видеть число колонок и ширину в пикселях:
Измените Ширину выпадающего меню ( Dropdown Width). Сделайте тоже самое для Ширины колонки (Column Width). Мы установили значение 220px :
Сохраните изменения. Обновите страницу. Мы увеличили ширину подменю. Вы можете отрегулировать эти настройки для каждого меню и подменю:
Вы можете также ознакомиться с детальным видео-туториалом ниже:
Источник
DJ-MegaMenu PRO v4.0.0 — мега меню для Joomla
DJ-MegaMenu Pro – это модуль горизонтального мега меню Joomla с большим количеством настроек и наличием мобильной версии. Вы сможете разместить любой модуль в подменю DJ-MegaMenu, гибко сконфигурировать внешний вид и анимацию элементов меню и подменю. Также будут доступны дополнительные опции по настройке каждого пункта меню из стандартного менеджера меню Joomla. Можно располагать подпункты меню в столбцах, оснащать их иконками и дополнительными надписями.
Возможность настройки каждого пункта меню отдельно друг от друга при помощи расширенных опций в менеджере меню Joomla. Не забудьте активировать плагин DJ-MegaMenu. Добавление иконок, подзаголовков, задание фона (изображение с указанием вертикального и горизонтального выравнивания), возможность показа\скрытия каждого отдельного пункта меню в мобильном или обычном меню. Так же можно задать ключ доступа, который позволит перемещаться в нужную часть страницы при помощи клавиатуры.
Добавление иконок (Bootstrap или Font Awesome) к пунктам меню. Возможность отображения иконок в мобильном или обычном меню.
Добавление различных эффектов CSS3 анимации появления и исчезания (более 30). Настройка времени открытия и закрытия подменю. Настройка направления открытия и возможность раскрытия подменю по нажатию или наведению.
Источник