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

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

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

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

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

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

  Нажимаем создать меню.

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

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

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


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

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

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

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

  Суффикс класса меню указываем:

nav-pills

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

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

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

 

Комментарии  

Эми
# Эми 08.12.2016 10:36
Спасибо большое! Очень помогли!
Ответить | Ответить с цитатой | Цитировать
Boss
# Boss 05.04.2017 08:52
Отлично ! Реально сработало в отличии от -nav
Ранее нигде не встречал nav-pills. Если не трудно, прокомментируйте в чем секрет ?
Ответить | Ответить с цитатой | Цитировать
Super User
# Super User 05.04.2017 10:15
Нет здесь никаких секретов. Прописывая в настройках модуля nav-pills, мы добавляем к модулю класс стилей имеющий данное название, который уже прописан в CSS-файле шаблона. В шаблонах на бутстрапе данный класс имеет название nav-pills.
В итоге получается, что пункты меню подчиняются прописанному стилю
.nav-pills > li > a

где есть такое свойство:
display: inline;
которое выравнивает пункты меню в линию (горизонтально).
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для того чтобы ваши комментарии появлялись мгновенно (без модерации), авторизируйтесь или пройдите регистрацию на сайте. Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить