Горизонтальное меню со всплывающими подкатегориями

На Joomla 3x есть проблемы с созданием горизонтального меню, так как изменён модуль и в нём нет возможности указать его тип отображения. Прописывание суффикса помогает не всегда и надо добивать шаблон ручками через код CSS. Сегодня я расскажу, как сделать горизонтальное меню с выпадающими категориями на примере шаблона Protostar, и приложу к материалу сам файл template.css.

Создать горизонтальное меню на Joomla 3x не так просто, ведь в новой панели управления напрочь отсутствует в настройках модуля возможность указать способ его отображения. Народные умельцы советуют прописать суффикс горизонтального меню, но лично мне это не помогло и пришлось шаманить с помощью рук и бубна.

Итак, делаем горизонтальное выпадающее меню на шаблоне Protostar и Joomla 3.5.

Настройка меню Joomla 3x

Настройки меню

Для начала создаём меню в менеджере меню и добавляем в него пункты. Описывать процесс создания самого меню говорить подробно не буду, я хочу больше времени уделить части его css оформления. Коротко, создаёте:

  1. - Новое меню, я назвал его Верхнее меню,
  2. - Категории,
  3. - Подкатегории.

При создании категории указываете «целевое окно» ─ родитель, в настройках меню справа указываете меню привязки и «родительский элемент»  ─ корневой пункт меню.

В «параметрах ссылки» включаем «показывать в меню» и «создать заголовок», остальноё всё идёт по умолчанию.

Иные настройки нужны пункту подкатегория. Тут важно указать родительским элементом не корневой пункт, а категорию. Тип пункта меню на своё усмотрение, я на denver сделал подкатегории блогами, а категории списками материала. На первом скрине настройки подкатегории.

Настройка модуля меню Joomla 3.5

Настройки модуля

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

  1. Выбор меню – верхнее,
  2. Базовый пункт – текущее,
  3. Показывать подпункты – да,
  4. Показывать заголовок – нет.

Также надо указать позицию, я указал position-1, она идеально подходит для вывода в шаблоне Protostar.

Сделано, смотрим на сайт и не видим ничего горизонтального, так как Joomla 3,5 тупит и всё пытается вывести по вертикали.

Настройка CSS

Никакие попытки прописать суффикс в модуле результата не принесли, поэтому пришлось идти в css и переписывать весь блок отображения меню. Я делаю пробник Joomla 3,5 на Denver, но суть правки стилей одна – нам надо заставить меню выводиться горизонтально и привести его в божеский вид.

В папке шаблона CSS находится файл template, его и будем править.

Меню мы выводим в position-1, поэтому править будем в стилях блок .navigation.

Цвет указываем через background-color,

Позиционирование шрифта по высоте меню margin-top,

От острых углов избавляемся с помощью border-radius.

В целом начало блока CSS у меня вышло таким:

.navigation {
clear: both;
font: bold 16px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: #1E90FF;
height:36px;
border-bottom:4px solid #fff;
border-radius: 7px; }

Немного мата и ловкости рук и вот и в Joomla 3,5 получается горизонтальное меню с выпадающими подкатегориями. На цвета пока не обращайте внимания, пока делается каркас нового сайта, поэтому цвета ещё будут меняться.

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

Комментарии   

+2 #2 Super User 27.07.2017 13:19
В template.css блок .navigation ul li a строка color изменяет цвет окна при наведении. Если хотите изменить цвет самого меню, то блок .navigation { строка background-color:.
Цитировать
0 #1 Pavlo 27.07.2017 10:56
Подскажите как можно сменить цвет заднего фона в меню?
Цитировать

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


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