Загрузка...

Уроки по созданию сайтов

Создание шаблона Joomla за 6 шагов. Шаг 4.

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

Преимущество использования правил 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-style: none;
17  margin: 0;
18  padding: 0;
19  }
20 .moduletable_menu li{
21  border-bottom: 1px solid #ccc;
22  margin: 0;
23  }
24 .moduletable_menu li a{
25  display: block;
26  padding: 3px 5px 3px 0.5em;
27  border-left: 10px solid #333;
28  border-right: 10px solid #9D9D9D;
29  background-color:#666;
30  color: #fff;
31  text-decoration: none;
32  }
33 html>body .moduletable_menu li a {
34  width: auto;
35  }
36 .moduletable_menu li a:hover,a#active_menu:link,a#active_menu:visited{
37  border-left: 10px solid #1c64d1;
38  border-right: 10px solid #5ba3e0;
39  background-color: #2586d7;
40  color: #fff;
41  }

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

img 5

{

Напишите нам

}