Определим, как будет выводиться меню в нашем простом шаблоне.

Преимущество использования правил CSS перед табличной структурой HTML проявляется в меньшем размере кода и более простой верстке. Кроме того, существует большое количество примеров организации различного типа меню на основе CSS, которые достаточно просто адаптировать для использования в шаблоне Joomla.

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

1 <div id="navcontainer">
2     <ul id="navlist">
3         <li id="active"><a href=" #" id="current">Пункт один</a></li>
4         <li><a href="#">Пункт два</a></li>
5         <li><a href="#">Пункт три</a></li>
6         <li><a href="#">Пункт четыре</a></li>
7         <li><a href="#">Пункт пять</a></li>
8     </ul>
9 </div>

Список <ul> имеет идентификатор navlist и помещен в контейнер <div> c идентификатором navcontainer. Чтобы воспроизвести такую же структуру в шаблоне Joomla, необходимо организовать внешний контейнер <div>. Задача решается с помощью суффикса модуля. Модуль с опцией style="xhtml"будет иметь вид в итоговом коде:

1 <div class="moduletable">
2     <h3>...Заголовок модуля...</h3>
3     ...Содержание модуля...
4 </div>

Если установить для модуля суффикс _menu, то он будет добавлен к названию класса moduletable:

1 <div class="moduletable_menu">
2     <h3>...Заголовок модуля...</h3>
3     ...Содержание модуля...
4 </div>

Теперь если вы будете использовать готовый код CSS для меню, то в нем надо будет заменить имя класса navcontainer на moduletable_menu.

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

Добавим в файл template.css нашего шаблона следующий код для формирования меню:

01 .moduletable_menu{
02  padding:0;
03  color#333;
04  margin-bottom:1em;
05  }
06 .moduletable_menu h3 {
07  background:#666;
08  color:#fff;
09  padding:0.25em 0;
10  text-align:center;
11  font-size:1.1em;
12  margin:0;
13  border-bottom:1px solid #fff;
14  }
15 .moduletable_menu ul{
16  list-stylenone;
17  margin0;
18  padding0;
19  }
20 .moduletable_menu li{
21  border-bottom1px solid #ccc;
22  margin0;
23  }
24 .moduletable_menu li a{
25  displayblock;
26  padding3px 5px 3px 0.5em;
27  border-left10px solid #333;
28  border-right10px solid #9D9D9D;
29  background-color:#666;
30  color#fff;
31  text-decorationnone;
32  }
33 html>body .moduletable_menu li a {
34  widthauto;
35  }
36 .moduletable_menu li a:hover,a#active_menu:link,a#active_menu:visited{
37  border-left10px solid #1c64d1;
38  border-right10px solid #5ba3e0;
39  background-color#2586d7;
40  color#fff;
41  }

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

img 5

{

}