Joomla 3 меню горизонтальное – Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap. — Вебджем.рф

Содержание

Горизонтальное меню joomla

Как сделать горизонтальное меню на joomla

Для того, чтоб создать горизонтальное меню, нужно выполнить следующие действия:

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

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

Расширения → Менеджер модулей

Нажимаем создать меню, после чего нам предлагают выбрать тип модуля.

Выбор типа модуля — выбираем пункт:

Меню — Этот модуль отображает меню на страницах сайта.

Далее делаем настройки меню. Данные настройки подходят так же в случае если у вас уже есть меню и Вы желаете сделать из него горизонтальное меню.

Задаём название для модуля и выбираем позицию «position-1» для стандартных шаблонов джумлы или позицию согласно вашего шаблона. Я выставляю настройки вот так:

Далее переходим на вкладку Дополнительные параметры и делаем следующие настройки:

Суффикс класса меню указываем nav-pills

!!!Будьте внимательны — вначале один пробел потом nav-pills

Всё! Горизонтальное меню готово. Заходим на сайт и любуемся проделанной работой.

Записи по теме

Мега меню для joomla

Мега меню — это многофункциональный модуль горизонтального меню для Joomla, способный наделить меню на вашем сайте самым расширенным функционалом.

Как сделать горизонтальное меню в Joomla 3

Формат меню имеет значение. Есть разница между тем, горизонтальное у вас меню или вертикальное.

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

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

Как сделать меню горизонтального формата в Joomla

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

Проходите в административную панель, авторизуетесь.
Далее переходите в «Менеджер расширений» и там выбираете пункт «Модули».
Чтобы увидеть установленные модули, откройте «Модули сайта». Там появится ваше расширения элемента меню.
Жмете «Изменить».
Переходим во вкладку «Подробности» и указываем позицию в шаблоне — то есть где будет размещен модуль.
А во вкладке «Параметры» задаем стиль «Горизонтальное меню».
Сохраняем нововведения.

Теперь ваше меню появится на сайте и будет иметь горизонтальный формат. Не забудьте в админке Joomla добавить пункты для меню, иначе оно останется пустым.
https://www.youtube.com/watch?v=vhmPQnWFaeU&spfreload=10

DJ-Menu

Модуль 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-х уровней подпунктов.

RokNavMenu

Хоть данный модуль и идет в комплекте с шаблоном Joomla от RocketTheme, но его можно использовать как самостоятельное расширение. Модуль позволит вам сделать мощное, анимированное, плавное и адаптивное горизонтальное меню за очень короткие сроки. Огромное преимущество RokNavMenu — понятная даже ребенку настройка. В два счета вы сможете создать потрясающее меню из иконок, картинок и целых галерей. И, что самое важное, RokNavMenu можно скачать бесплатно и пользоваться расширением без каких-либо ограничений!

Sticky Horizontal Bar Module Joomla

По мнению некоторых маркетологов, данный плагин способен увеличить конверсию вашего сайта на 30 %. Под словом «конверсия» подразумевается уменьшение числа отказов, то есть люди будут чаще кликать на ваше меню и делать от двух переходов на сайте. Sticky Horizontal Bar Module Joomla позволит вам сделать красивое меню, по которому будет жалко не кликать.

Установка расширения ничем не отличается от типовой, потому загрузите модуль через «Менеджер расширений» в админке. Хорошая особенность модуля — это возможность полностью изменять оформление, не затрагивая при этом CSS. Вы сможете редактировать цвет, шрифт, размеры, тип отображения и много другео прямо в настройках. Единственный минус модуля — это надобность создавать отдельную позицию в шаблоне, так как не во всех местах расширение будет корректно работать.

Candy Horizontal Menu

Изначально модуль Candy позволял делать исключительно вертикальное меню. Но по многичисленным просьбам пользователей разработчик все же решил выпустить новую горизонтальную версию модуля. Большой плюс новой версии Candy — это независимая работа даже при отключенном JavaScript в браузере. Вы сможете создать менюшку с различными эффектами, которые будут нормально отображаться в любом браузере. Candy Horizontal Menu легко устанавливается и так же просто настраивается, так что у вас не должны возникнуть вопросы во время пользования модулем.

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

Как сделать горизонтальное главное меню сайта шаблона Protostar в Joomla 3

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

Исходное меню шаблона Protostar Joomla 3 в виде списка

В изначальных настройках шаблона Protostar меню выдаётся в виде списка, где каждый пункт меню находится под другим. И даже без подсветки активного пунка меню:

Заглянем в админке Joomla «Менеджер модулей», а конкретно в настройки модуля основного меню сайта на вкладку «Дополнительные параметры». А конкретно нас интересует поле «Суффикс класса меню». Изначально это поле пустое:

Главное меню сайта в виде вкладок (Шаблон Protostar Joomla 3)

Изменим значение поля «Суффикс класса меню» на

 nav-tabs

Внимание!
Обращаю внимание, что перед написанием nav-tabs обязательно должен стоять пробел. Так надо! =)

После того, как поле заполнено, нужно сохранить его значение в админке Joomla:

В итоге, произведя это незначительное изменение модуля главного меню сайта получим его отображение в виде вкладок:

Главное меню сайта в виде кнопок (Шаблон Protostar Joomla 3)

Если произвести точно такие же манипуляции с настройками модуля основного меню сайта, но введя в поле «Суффикс класса меню

 nav-pills

и сохранив изменения:

получим симпатичное основное меню сайта в виде строки с подсветкой активного пункта меню:

Важно!
Напомню, то перед nav-pills в поле «Суффикс класса меню» обязательно должен стоять пробел.

Заключение

В результате этих манипуляций:

Перенос главного меню в верхнюю часть страницы под шапку → читать
Горизонтального расположения основного меню сайта путём правки поля «Суффикс класса меню» в настройках модуля выдачи меню (описанного в этой статье)

мы получаем красивое главное меню сайта в стандартном шаблоне Protostar Joomla 3.

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Горизонтальное меню для Joomla (джумла) 3

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

Для начала хотел бы напомнить, что меню в CMS Joomla, формируется в менеджере меню – это один из встроенных компонентов. Но сегодня, мы его использовать не будем и вместо ручного формирования ссылок — используем, компонент JLinker Menu Link Generator.

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

Бесплатная версия, которую мы будем использовать в данном уроке, работает только с стандартными компонентам и позволяет сгенерировать пункты меню для категорий и материалов CMS Joomla.

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

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

Узнать подробнее

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

При этом нас перенаправляют на официальный сайт расширения JLinker Menu Link Generator, где после общего описания располагается аналогичная кнопка “DOWNLOAD”, которую мы так же используем.

Для скачивания бесплатной версии, необходимо указать адрес электронного ящика и активировать чекбокс “I agree to the Terms and Conditions”. Заметьте, что после скачивания обязательно необходимо распаковать полученный архив.

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

Первое что бросается в глаза – это несколько выпадающих списков из группы “Generate links for”, используя которые Вы можете выбрать компонент и его составную часть, для которой будут сгенерированы пункты меню. Напомню, что в бесплатной версии Вы можете работать только с компонентом “Content” CMS Joomla. Немного ниже в центральной области отображаются те элементы, непосредственно для которых будут созданы ссылки меню. Таким образом, если в выпадающем списке выбрать элемент “Categories” – в центральной области будут отображаться все добавленные категории, если же выбрать “Articles” – все добавленные материалы. При этом Вы можете самостоятельно задать псевдоним и заголовок для каждого пункта меню – просто прописав их в соответствующих полях до генерации ссылок.

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

Joomla menus – выпадающий список выбора меню, к которому будут привязаны ссылки;

Parent link – родительская ссылка меню. Необходима в том случае если формируются вложенные ссылки меню;

Доступ – выбор группы пользователей, для которых создаются ссылки меню;

Status – статус ссылок – опубликовано или нет;

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

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

Узнать подробнее

Поэтому для начала давайте создадим пункты меню на существующие категории сайта. Для этого выбираем элемент Category, в выпадающем списке сверху. Далее кликаем по кнопке “Load”, таким образом, в центральной области будут отображены созданные категории CMS. Затем отмечаем галочками интересующие, для которых будут созданы ссылки меню. После этого в правом блоке выбираем меню и кликаем по кнопке “Сохранить” – таким образом мы создадим новые пункты меню.

Далее создадим ссылки на материалы. Для этого выбираем элемент Articles, нажимаем на кнопку Load, отмечаем галочками необходимые, выбираем соответствующее меню и так как все статьи привязаны к категории Blog, указываем в качестве родительской ссылки меню – Blog. Таким образом, будут сформированы вложенные ссылки меню (не забываем кликнуть по кнопке “Сохранить”).

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

Теперь необходимо только лишь отобразить созданное горизонтальное меню joomla и конечно для этого мы не будем использовать стандартный модуль, так как он, как по мне, не предназначен для работы с многоуровневым меню. Давайте используем дополнительное расширение под названием EXT Superfish menu.

Традиционно – клик по кнопке “Download”, перенаправит Вас на официальный сайт разработчика.

Для данной статьи вполне достаточно бесплатной версии, а значит, для скачивания, кликаем по кнопке”Download” в колонке “Standart”. Но есть один небольшой нюанс при использовании бесплатной версии, который заключается в том, что необходимо поделится записью о данном модуле в одной из популярных социальных сетей. Я использую Twitter.

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

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

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

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

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

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

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

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Делаем горизонтальное меню в Joomla 3

Делаем горизонтальное меню в Joomla 3 — RTR24.ru

10 апреля 2013

Горизонтальное меню в Joomla 3 настроить легко (вспоминаем, что тракторист показывает только простые способы).

Горизонтальное меню ставим в Joomla 3

1. Создаем меню, как обычно.

2. Делаем модуль для этого меню. Выбираем позицию «position-1» и меню будет в топе вверху, как и всегда.

3. Настройки модуля — Дополнительные параметры — Суффикс класса меню и пишем

nav-pills, где красненькое, это значит вначале ставим пробел.

И горизонтальное меню в Joomla 3 работает как миленькое.

< Убрать слово «Подробности» в Joomla 3
Решение — Fatal error: Call to undefined method JModel::getInstance() >

: Автор: Русский тракторист Игорь; Рубрика: Joomla

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.

RTR24.ru

русский тракторист 24 часа делает сайты

12 лучших бесплатных расширений Joomla для создания меню

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

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

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

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

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

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