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

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

По просьбе одного из пользователей JoomlaTown.net я решил написать статью и в ней подробно рассказать о том, как сделать простое горизонтальное меню.

Поехали!

Всё что нам нужно для создания меню это:

• место под него в шаблоне
• изображение для меню (необязательно)
• небольшие знания основ CSS

Место в шаблоне

Немного о том как найти место в шаблоне.

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

Тут есть 2 варианта:

1. Найти это место при помощи FireBug (плагин для FireFox). Написать новые CSS стили для него взамен старых.
   Либо переименовать это место (обычно это блок div) в файле index.php и написать новые стили.
   В большинстве случаев эти блоки имеют идентификатор id="topmenu" или id="mainnav" или id="horizontalnav" или id="hornav" и т.д.
   Найти этот блок в index.php не составит большого труда.
2. Сделать новое место в шаблоне для своего меню. Например под логотипом, или над логотипом - искать проще тем же самым FireBug'ом.
   Этот вариант более простой.

Рассмотрим эти варианты на примерах.
Я взял два стандартных шаблона и открыл их в FireBug, для того чтобы найти место под горизонтальное меню.
Первый шаблон - Ja_purity.

Из картинки видно в каком блоке размещается меню, это блок с id="ja-mainnav" и его стили в правой колонке Firebug.
Теперь посмотрим его расположение в index.php:

Теперь либо ищем все стили которые заданы для этого блока (это долго) или
переименовываем этот блок и пишем стили с нуля (это проще).
Можно назвать вместо id="ja-mainnav", например id="topmenu" и убрать class="clearfix".

Либо под этим блоком делаем ещё один, прямо после комментария END: MAIN NAVIGATION можно вствить:

<div id="topmenu">
<jdoc:include type="modules" name="topmenu" />
</div>

В принципе тут нет особой разницы какой вариант выбирать.
Только сначала посмотрите нет ли такого же идентификатора (topmenu) у какого нибудь другого блока.
После этого нужно добавить новую позицию в файл templateDetails.xml в папке шаблона (чтобы она стала активна и в неё можно было вставить модуль с меню)

Рассмотрим 2ой пример - шаблон rhuk_milkyway, здесь немного сделано попроще:

Здесь меню "прячется" в блоке с id="tabmenu", CSS стили для этого блока не заданы, они заданы для тех элементов которые внутри него.

Посмотрим его файл index.php
Здесь присутствует старая табличная вёрстка с классами "pillmenu" и др.
Вложенные элементы нам не нужны и их можно смело удалить, только оставьте строчку с

<jdoc:include type="modules" name="user3" />

А остальное удаляем.

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

Перед тем как вносить какие то изменения в файлы, сделайте копии этих файлов. 
Если что то пойдёт не так, вы сможете без проблем вернуть всё назад.

Изображение для меню

Изображение для фона можно сделать в Photoshop'e. А можно вообще не использовать изображение, а фон задать числовым значением.
Итак, изображение.
Для начала нужно узнать размеры блока, в котором будет находиться новое меню. Или задать размеры в CSS.
И только потом делать изображение, под эти размеры.

У меня уже есть изображение, и я буду делать наоборот - подгонять размер блока под изображение.

Высота его 46px.
А ширину блока сделаем 98% чтобы он имел небольшие отступы по краям.

Всё изображение загружаться не будет, я вырезал из него два куска в Photoshop'e.

1. Это основной цвет    fon.png

2. Цвет при наведении    fonhover.png

Этого вполне достаточно - сохраню их в папке images своего шаблона Ja_purity.

Теперь немного CSS

1. В index.php переименую блок ja-mainnav в topmenu и уберу class="clearfix".

2. В настройках модуля меню ставлю другой класс модуля.
Это нужно для того чтобы на модуль с новым меню не действовали ранее заданные стили в шаблоне.
Такое может быть.

Также в параметрах модуля выбираем:
Тип меню - Список

3. Указываем в CSS файле новые стили для нового меню (в любом удобном месте):

Для самого блока topmenu (здесь внимание на отступы margin, в разных шаблонах они могут немного отличаться)

#topmenu {
width:98%;                     /* ширина блока */
height:46px;                  /* высота = высоте фонового рисунка  */
background: url('../images/fon.png') repeat-x;       /* фон  */
margin:0 3px 0 3px;        /*  отступы */
padding:0 10px;
border-radius:5px;           /* радиусы для блока - для новых браузеров  */
}

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

#topmenu li {
background:none;                  /* убираем фон, если он где то указан  */
list-style:none;                      /* убираем маркеры списка, если есть  */
padding:0;                           /* отступы */
float:left;                             /* обтекание пункта с правой стороны */
}

Для ссылок в этом блоке (ссылка будет как блок и все размеры пунктов меню будут сформированы здесь)

#topmenu li a {
display:block;      /* ссылка будет как блок, а не как строчный элемент  */
width:auto;         /* ширина зависит от длины текста */
height:35px;      /*  высота блока минус отступ */
font:18px Helvetica;                       /* шрифт  */
text-decoration:none;                     /* подчёркивания ссылки - нет  */
background:none;                          /* фон для ссылки не используем  */
color:#fff;                                      /* цвет шрифта  */
padding:10px 17px 0 17px;            /* отступы: сверху и с боков  */
}

Для ссылок при наведении (для ссылок мы указали выше, здесь указываем только отличия)

#topmenu li a:hover {
background: url('../images/fonhover.png');     /* фон при наведении  */
color:#006173;                               /* цвет шрифта при наведении  */
}

И последнее, это для пунктов которые открыты в данный момент (необязательно)

#topmenu li#current.active a {
color:#006173;                             /* меняем только цвет ссылок */
}

В принципе, всё.

Это меню тестировал в Opera, Safari, Firefox и Chrome.
Но суть не в этом. Главное, понять как оно реализовано.
Возможно, где то такое меню будет немного криво, это всё подгоняется на месте.

В следующей статье разберём как сделать выпадающее меню, тоже при помощи CSS.
Чтобы оно не нагружало сайт.

Успехов!