Архітектура меню та модулів Joomla!

Joomla! на мій погляд є найбільш дружнім движком навіть для верстальника-початківця. Якщо ви маєте який-неякий фундамент базових знань, час та наполегливість, зверстати якісний шаблон для вас не стане великою проблемою. Просто слід знати деякі речі. Про них можна прочитати у документації, знайти на форумах, або дізнатися самому – саме останнім шляхом я і пішов.

Архітектура модуля меню Joomla!

Модуль меню, має досить просту структуру. Ось вона:

<div class="moduletable">
<h3>
Заголовок меню
</h3>
<ul class="nav menu">
<li class="item-123 current active">
<a href="/posylannya.html">Ланка номер один</a>
</li>
<li class="item-456">
<a href="/posylannya.html">Ланка номер два</a>
</li>
<li class="item-456">
<a href="/posylannya.html">Ланка номер три</a>
</li>
</ul>
</div>

Це структура простого меню, без підпунктів. Структура меню з підпунктами виглядає наступним чином:

<div class="moduletable">
<h3>
Заголовок меню
</h3>
<ul class="nav menu">
<li class="item-123 current active">
<a href="/storinka.html">Основний пункт меню</a>
<ul>
<li class="item-456">
<a href="/storinka-2.html">Підпункт основного пункту-1</a>
</li>
<li class="item-789">
<a href="/storinka-3.html">Підпункт основного пункту-2</a>
</li>
</ul>
</li>
<li class="item-589">
<a href="/storinka-5.html">Основний пункт меню-2</a>
</li>
</ul>
</div>

Розберемо що за що відповідає. Насправді тут немає нічого складного. Меню формується списком, <ul class=”nav menu”> якому ми можемо задати будь-який вигляд, як горизонтальний так і вертикальний. Ви можете створити сотню стилей меню, достатньо тільки прописати власний суфікс класу меню, наприклад <ul class=”nav menu miy-clas”> і все. Потім при публікації модуля меню у адмінпанелі слід указати ваш суфікс класу меню. У полі перед суфіксом обов’язково слід поставити пробіл.

Пункти меню виглядають наступним чином <li class=”item-123 current active”>. Одразу хочу зазначити, що класи “current active” відповідають за активний пункт меню, а клас “item-123” нас взагалі мало цікавить. Тобто абсолютно не цікавить. Стилі для пунктів меню прописуються наступним чином:

ul.nav.menu > li {
display: block;
}
ul.nav.menu > li > a {
display: block;
}

Для окремих пунктів меню також можна прописати окремі стилі. І також за допомогою суфіксу класу.

Тут не треба ставити пробілу, достатньо просто прописати клас.

У наступному матеріалі ми розглянемо кістяк головної сторінки сайту з різною кількістю колонок.