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

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

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

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

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href=" #" id="current">Пункт один</a></li>
		<li><a href="#">Пункт два</a></li>
		<li><a href="#">Пункт три</a></li>
		<li><a href="#">Пункт четыре</a></li>
		<li><a href="#">Пункт пять</a></li>
	</ul>
</div>

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

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

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

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

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

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

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

.moduletable_menu{
 padding:0;
 color: #333;
 margin-bottom:1em;
 }
.moduletable_menu h3 {
 background:#666;
 color:#fff;
 padding:0.25em 0;
 text-align:center;
 font-size:1.1em;
 margin:0;
 border-bottom:1px solid #fff;
 }
.moduletable_menu ul{
 list-style: none;
 margin: 0;
 padding: 0;
 }
.moduletable_menu li{
 border-bottom: 1px solid #ccc;
 margin: 0;
 }
.moduletable_menu li a{
 display: block;
 padding: 3px 5px 3px 0.5em;
 border-left: 10px solid #333;
 border-right: 10px solid #9D9D9D;
 background-color:#666;
 color: #fff;
 text-decoration: none;
 }
html>body .moduletable_menu li a {
 width: auto;
 }
.moduletable_menu li a:hover,a#active_menu:link,a#active_menu:visited{
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
 }

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

Сайт с использованием шаблона Joomla

sourse

 

Анонс

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 22 Июня 2011
Просмотров: 52350
Правила перепечатки

5 последних уроков рубрики "Joomla!"

^ Наверх ^