Как сделать красивое меню joomla
Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность.
Практически все основные этапы создания шаблона пройдены. Мы переделали html-шаблон под Joomla, настроили скрипты и дизайн модулей. Последней крупной проблемой остается создание и настройка стилей меню.
В этой статье я расскажу о том, как можно сделать собственный стиль меню Joomla и подключить его для использования, а также протестировать шаблон.
Шаг 8. Создаем стили меню.
Для начала предложу «вариант для ленивых». Если со стилями меню заморачиваться не хочется, достаточно будет установить компонент swmenufree.Это бесплатный компонент, который позволяет довольно гибко настроить стиль меню. Думаю, разобраться с ним будет несколько проще, чем с созданием стилей вручную, но вот что будет полезнее… В общем, каждый выбирает для себя.
В базовом шаблоне меню были построены исключительно на html. Такая конструкция очень неудобна в использовании, поскольку для добавления или удаления даже одного пункта меню, нужно изменять код шаблона. Нам же, нужно настроить стиль только одного пункта меню. Для всех остальных Joomla будет его автоматически копировать.
В базовом шаблоне всего два вида меню: левое(в левой колонке) и горизонтальное (вверху). Настроить нужно и то и другое. Начнем с левого.
Настройка стиля левого меню.
Для начала нам понадобится html-код одного пункта меню из первоначального шаблона. Получить его просто, когда есть Firebug. Вот он:
К сожалению, вглядевшись в этот код, а также в картинки, еще раз можно убедиться, что базовый html-шаблон построен криво. Он использует не отдельную картинку для каждого пункта меню, а одну общую. Таким образом, чтобы добавить новый пункт в базовый шаблон, помимо редактирования кода, пришлось бы перерисовывать эту самую картинку. Это была проблема №1. Она не доставит особого труда, т.к. Вырезать кусочек из изображения легко. А вот проблема №2 гораздо серьезнее, она заключается в самом стиле меню. Видишь у каждого пункта слева оранжевый параллелограмм? Он доставит наибольшее число проблем. Почему? Попробуй ответить на этот вопрос самостоятельно…
Теперь отвечу и я. Если внимательно посмотреть, то можно понять, что первый и последний пункт меню отличаются по стилю от всех остальных. И если сделать их такими же как все, то у первого пункта в левом верхнем углу будет оранжевый треугольник, а у последнего еще и лишняя полоска. Реализовать такой стиль, конечно можно, но для этого придется лезть в дебри, хотя и без них можно запутаться. Я несколько упрощу задачу, обрезав выпирающую часть параллелограмма. Это несколько изменит стиль меню, но зато значительно упростит его создание. Итак, вот такое изображение будет использоваться для background’а пункта меню:
Теперь перейдем непосредственно к созданию стиля меню.
Всего в Joomla 1.5 предусмотрено 4 типа меню:
– наследовать – плоский список.
Каждый из них построен по-своему. Выбор одного из типов производится в настройках модуля меню.
К сожалению, не один из этих типов не предполагает создание выпадающего меню (когда при наведении курсором на пункт выпадают его подпункты). Это можно считать одним из недостатков Joomla, поскольку такие меню довольно популярны. Так как же тогда сделать выпадающее меню? Я выделил для себя всего 2 варианта:
Далее речь пойдет о втором варианте.
У меню есть 3 основных вида:
Каждый из этих пунктов должен быть описан отдельными css-свойствами. Правда в нашем базовом шаблоне все 3 вида выглядят практически одинаково. Так не интересно, и поэтому мы сделаем отдельные свойства для каждого вида, чтобы меню было более красивым.
Стиль меню должен быть универсальным. Его нужно сделать так, чтобы можно было применить к любому меню. Для этого будем использовать суффикс css-класса меню. Суффикс я сделал просто «1». Таким образом, наши css-свойства будут иметь вид «menu1».
Теперь в css-файл шаблона добавляем следующий код (этот копировать не стоит, поскольку я комментирую его не так, как допускает css. Взять его можно из шаблона, который прикреплен в конце статьи):
Вот весь добавленный код:
font-family: Verdana, Arial, Helvetica, sans-serif;
background: transparent url(/templates/first-template/images/1.gif) no-repeat scroll 0 0; //это наша картинка, которая служит фоном кнопок меню
.menu1 li a span < // меняем цвет
display:none; // не показывается, пока курсор не наведен на пункт
background: transparent url(/templates/first-template/images/2.gif) no-repeat scroll 0 0;
Что есть что, можно разобраться немного поиграв с ним Firibug’ом. Отмечу, что вместо «ааа» может быть использована любая другая комбинация букв.
Для корректной работы меню, в модуле, который будет его выводить меню, необходимо выбрать «всегда показывать подпункты» – «да».
Вообще, стоит отдельно упомянуть о браузере Internet Explorer 6. Его ненавидят все верстальщики и web-мастера мира. Думаю именно из-за него на Билла сыплется большинство проклятий J. У IE6 есть две главные особенности:
– он ужасно кривой, и не понимает множества css-свойств так, как их нужно понимать;
– из за того, что он по-умолчанию входит в самую распространенную операционную систему в мире (Windows XP), его использует масса «продвинутых» людей.
Таким образом, благодаря «отличному» браузеру от Microsoft, все web-мастера изощряются как только могут, чтобы привести отображение сайта в IE6 к нормальному.
Нашу задачу IE6 тоже не обошел стороной. Проблема состоит в том, что свойство «hover» он понимает только применительно к ссылкам в меню. Т.е. если не использовать хак, то в IE6 при наведении курсора на пункт меню произойдет… ничего не призойдет J.
Хак, приведенный мной в коде не является совсем корректным, поскольку при проверке такого css, валидатор выдаст ошибку (что такое валидатор и для чего он нужен рассказано ниже), зато является наиболее простым. В других вариантах придется использовать дополнительный файл (найти такие варианты решения можно набрав в гугле «hover IE6»). Таким образом, если для тебя не важна 100% валидность, можешь использовать этот способ, если важна – то один из других.
Еще хочу отметить, что в данном случае выпадающее меню будет работать корректно только при уровне вложенности не более одного (это означает, что если в подпункте меню, есть еще подпункты, то они будет показываться неправильно). Решение для высокого уровня вложенности существует, но я не стал приводить его здесь, дабы совсем не запутать новичков. Найти его поможет все тот же гугл. Особенностью такого css-меню является то, что для каждого дополнительного уровня вложенности требуется писать отдельный код, так что в каком-то смысле оно не является универсальным.
Настройка стиля верхнего меню.
Теперь займемся верхним меню. Стиль для него создается по аналогии. Его суффикс будет «2»:
Горизонтальное меню для Joomla 3 – инструкция по созданию и модули
Время на чтение: 4 минуты
Формат меню имеет значение. Есть разница между тем, горизонтальное у вас меню или вертикальное.
Так, для мобильных браузеров лучше использовать адаптивного вертикальное меню. Зато на компьютерах куда естественнее смотрится горизонтальное навигационное меню – оно выглядит главнее вертикального.
В данной статье мы разберем как сделать именно такое, “главное”, меню при помощи стандартных опций Joomla, а также при помощи подборки лучших расширений. 
Как сделать меню горизонтального формата в Joomla
Горизонтальное меню – это не анимационное, не многоуровневое, не выпадающее меню, потому сделать его проще простого. Вам необходимо всего лишь слегка изменить текущие настройки элемента меню в админке. Вот пошаговая инструкция как это сделать:
Теперь ваше меню появится на сайте и будет иметь горизонтальный формат. Не забудьте в админке Joomla добавить пункты для меню, иначе оно останется пустым.
https://www.youtube.com/watch?v=vhmPQnWFaeU&spfreload=10
DJ-Menu
Модуль DJ-Menu позволит вам “миксануть” в навигации одновременно и выпадающее, и горизонтальное, и анимированное меню. Это удобный, мощный и современный модуль для Joomla для создания качественной менюшки. Распространяется расширение как платно, так и бесплатно. В платной версии есть дополнительные возможности: больше эффектов, умное управление уровнями и т. д. А вот возможности бесплатной версии расширения DJ-Menu:
jQuery Slide-Down-Box Menu
Данный модуль подходит для Joomla 2.5 и 3.5. Суть работы расширения в использовании библиотек jQuery, за счет которых обеспечивается анимационный эффект модуля. Это расширение идеально подходит для сайтов, где критически не хватает анимации. Учтите, что у модуля особенная настройка. Вот инструкция:
В остальном вы и сами сможете разобраться. Добавление пунктов осуществляется стандартным образом. Вы сможете выбирать для пунктов иконки или целые изображения. Учтите, что модуль поддерживает до 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!
В предыдущих уроках мы познакомились с понятием структуры сайта и создали необходимые категории, а так же создали свой первый материал в Joomla 3. После создания материала Вы наверно уже обратили внимание, что на сайте он не появился, оно и понятно ведь мы для этого ничего не предпринимали. Так как же выводить созданные материалы на страницах сайта? Все очень просто, для этих целей в Joomla как раз и предусмотрено меню именно с его помощью мы сможем отображать на страницах нашего сайта заранее созданные материалы и другую информацию. Таким образом, в данном уроке поговорим о меню в Joomla.
Для работы с меню в панели управления Joomla предусмотрен специальный раздел, который так и называется «Меню». Как попасть в панель управления (админку сайта) и где находится раздел «Меню» рассказывать не буду, об этом говорилось в одном из предыдущих уроков посвященном знакомству с админкой. На всякий случай ниже на скриншоте обозначен раздел «Меню»:
В разделе «Меню» по аналогии с материалами и категориями можно наблюдать «Менеджер меню» а так же все созданные пункты меню для сайта. Знакомство с меню предлагаю начать как раз с «Менеджера меню» Joomla, жмем по нему мышкой и попадаем на страницу «Менеджер меню: Все меню»:
Именно с этой страницы производятся все манипуляции с меню в Joomla, будь то создание, редактирование, копирование либо удаление. Давайте посмотрим, что содержится на странице менеджера меню. Тут все стандартно, примерно так же как в менеджере материалов или категорий. В верхней части имеются кнопки для работы с меню – создать, изменить, удалить, настройки и т.д. Слева кнопки быстрого доступа – меню и пункты меню. И наконец, в центральной части страницы отображаются все имеющиеся меню.
По умолчанию в Joomla уже создано одно единственное меню под названием «Main Menu», которое по умолчанию является главным, именно с него и начнем разбор полетов. Жмем по названию меню и попадаем на страницу пунктов меню – «Меню: Пункты (Main Menu)»:
На данной странице мы видим, что у нас имеется один единственный пункт меню под названием «Home», тут же видно, что он относится к «Main Menu», а так же отмечен как главный. Чтобы не запутаться, давайте разберем, что такое меню и что такое его пункты, чтоб не писать много букв я покажу это на примере (скриншот ниже):
Думаю, теперь стало понятно, что такое меню и что такое его пункты. Получается, по умолчанию в Joomla мы уже имеем главное меню (Main Menu), которое содержит один единственный пункт меню «Home» напротив которого стоит пометка, что он главный, следовательно, он ведет на главную страницу сайта. А теперь давайте рассмотрим устройство данного пункта меню и почему главная страница сайта пустая.
Редактирование пункта меню в Joomla
Для того чтобы отредактировать имеющийся пункт меню в Joomla необходимо нажать мышкой по его названию (в панели управления) после чего мы попадаем на страницу его редактирования.
Страница редактирования пункта меню не имеет особых отличий от страниц редактирования тех же материалов или категорий, так что сложностей тут быть не должно. Но есть и некоторые отличия, о которых стоит рассказать подробнее. На первой вкладке «Пункт меню» мы видим переключатель «Главная страница» и два варианта «Да» и «Нет». В нашем случае переключатель стоит в положение «Да» следовательно, данный пункт меню ведет на главную страницу сайта.
Следующий параметр «Тип пункта меню» именно он отвечает за то, что будет выводиться на странице сайта при нажатии на ссылку пункта меню. В нашем случае в качестве типа для пункта меню выбраны избранные материалы. Другими словами на главной странице сайта в нашем случае будут отображаться избранные материалы в виде блога (что такое избранные материалы и как они создаются, читайте в этой статье). А выглядит это примерно вот так:
Остальные вкладки в данном случае актуальны только для выбранного типа пункта меню, рассматривать их не будем. На данном этапе просто поменяем его название и сохраним результат. Для наглядности я добавил к одному из материалов свойство «избранного» получившийся результат представлен на скриншоте ниже.
Как отредактировать пункт меню разобрались, теперь давайте создадим новый собственный пункт меню.
Как создать собственный пункт меню в Joomla 3
Давайте разберем все по порядку. Изначально придумаем и заполним заголовок меню, я назвал его «Установка» (не спрашивайте почему). Далее заполняем алиас, можно конечно оставить без изменения, но в таком случае алиас получится такой – «ustanovka», мне этого не особо хочется, и я присвоил ему собственное название «installation».
Далее следует выбрать «Тип пункта меню», тут все сложнее, при нажатии на кнопку «Выбрать» вы увидите огромный список всевозможных типов, и этот список может увеличиваться в зависимости от установленных расширений. В рамках данного урока типы пункта меню рассматривать не будем, так как это достаточно обширная тема для разговоров и для них я решил выделить отдельные уроки (урок-1 и урок-2).
Для нашего нового типа меню давайте выберем список материалов категории, для этого жмем по кнопке «Выбрать» в списке находим раздел «Материалы» и выбираем «Список материалов категории».
Далее необходимо выбрать категорию, в которой содержатся интересующие нас материалы, в моем случае это «Установка» (что такое категория и как её создать читаем в этом уроке).
На этом можно было бы, и закончить, но нас еще интересуют поля, которые расположены в правой части. Итак, по порядку. Первое поле «Меню», тут мы указываем, к какому меню будет отнесен только что созданный пункт, мы решили, что данный пункт будет в главном меню – оставляем без изменения. Далее «Родительский элемент» если оставить все без изменений, то пункт меню будет корневым, а если в качестве родительского выбрать уже существующий пункт, то данный пункт будет дочерним, т.е. вложенным. Чтобы стало понятнее, сохраним меню сначала корневым, а затем вложенным. Результат можно посмотреть на скриншоте:
Как видим, в первом случае пункты меню являются корневыми, а во втором вложены друг в друга и появляется только тогда, когда активен корневой пункт меню.
Аналогичным образом создаются любые другие пункты меню на сайте, но для большего понимания сути вопроса предлагаю перейти к следующему уроку посвященному типам пунктов меню.
Забегая вперед, хочу обратить внимание, что в нашем случае меню получилось вертикальным, а такое отображение не всех устраивает. Как сделать горизонтальное меню читайте в уроке, посвященном редактированию шаблона Joomla 3.
Как сделать горизонтальное главное меню сайта шаблона Protostar в Joomla 3
В предыдущей статье было показано, как перенести меню в верхнюю часть сайта (под шапку). В этой статье показано и рассказано, как из меню в виде списка, сделать горизонтальное главное меню сайта. При этом в стандартном шаблоне Protostar Joomla 3 есть два вида главного меню сайта: в виде вкладок и в виде кнопок. Ниже рассмотрим оба варианта, так как в настройках они не отличаются.
Исходное меню шаблона Protostar Joomla 3 в виде списка
В изначальных настройках шаблона Protostar меню выдаётся в виде списка, где каждый пункт меню находится под другим. И даже без подсветки активного пунка меню:
Заглянем в админке Joomla «Менеджер модулей», а конкретно в настройки модуля основного меню сайта на вкладку «Дополнительные параметры». А конкретно нас интересует поле «Суффикс класса меню». Изначально это поле пустое:
Главное меню сайта в виде вкладок (Шаблон Protostar Joomla 3)
Изменим значение поля «Суффикс класса меню» на
Внимание!
Обращаю внимание, что перед написанием nav-tabs обязательно должен стоять пробел. Так надо! =)
После того, как поле заполнено, нужно сохранить его значение в админке Joomla:
В итоге, произведя это незначительное изменение модуля главного меню сайта получим его отображение в виде вкладок:
Главное меню сайта в виде кнопок (Шаблон Protostar Joomla 3)
Если произвести точно такие же манипуляции с настройками модуля основного меню сайта, но введя в поле «Суффикс класса меню»
и сохранив изменения:
получим симпатичное основное меню сайта в виде строки с подсветкой активного пункта меню:
Важно!
Напомню, то перед nav-pills в поле «Суффикс класса меню» обязательно должен стоять пробел.
Заключение
В результате этих манипуляций:
мы получаем красивое главное меню сайта в стандартном шаблоне Protostar Joomla 3.