Многие люди при создании своего собственного шаблона задаются вопросам: "
Как лучше организовать меню?". Некоторые используют Flash-меню, некоторые вставляют JavaScript-меню. Я не люблю использовать эти элементы в своих работах, мне нравится чистый код, не обременный лишними файлами. Но, как тогда сделать удобное, легкое меню? Все очень просто: через CSS! Есть много способов создания меню с помощью CSS, в основе большинства которых лежит использование списков (с помощью тегов
<li>). Один из таких приемов мы сейчас и рассмотрим ниже. В Joomla! вывод меню оформляется и контролируется через [модули]. При создании нового меню, автоматически будет создан модуль с таким же названием, что и меню. В любом модуле есть настраиваемые параметры, изменяя которые, можно добиться изменения стиля отображения меню. Нужный нам модуль называется
mod_mainmenu. Наиболее важный параметр модуля - это "
Стиль меню".
Существует три стиля меню:
- Вертикальный - Меню выводится в вертикальной таблице
- Горизонтальный - Меню выводится в горизонтальной таблице
- Плоский список - Меню формируется через маркированный список (тег <ul>)
Так выглядит вывод меню через таблицы - или вертикальную, или горизонтальную:
<divclass="moduletable">
<h3>Главное меню</h3>
<tableborder="0"cellpadding="0"cellspacing="0"width="100%">
<tbody>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_frontpage&Itemid=1"
class="mainlevel"id="active_menu">Главная</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_content&task=view&id=5&Itemid=6"
class="mainlevel">Лицензия Joomla!</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_content&task=section&id=1&Itemid=2"
class="mainlevel">Новости</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_content&task=blogsection&Itemid=9"
class="mainlevel">Блог</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_weblinks&Itemid=23"
class="mainlevel">Ссылки</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_contact&Itemid=3"
class="mainlevel">Контакты</a>
</td>
</tr>
<tralign="left">
<td><ahref="http://mysite/index.php?option=com_search&Itemid=5"
class="mainlevel">Поиск</a>
</td>
</tr>
</tbody>
</table>
</div> |
А вот так выглядит плоский список:
<divclass="moduletable">
<h3>Главное меню</h3>
<ulid="mainlevel">
<li><ahref="http://mysite/index.php?option=com_frontpage&Itemid=1"
class="mainlevel"id="active_menu">Главная</a>
</li>
<li><ahref="http://mysite/index.php?option=com_content&task=view&id=5&Itemid=6"
class="mainlevel">Лицензия Joomla!</a>
</li>
<li><ahref="http://mysite/index.php?option=com_content&task=section&id=1&Itemid=2"
class="mainlevel">Новости</a>
</li>
<li><ahref="http://mysite/index.php?option=com_content&task=blogsection&Itemid=9"
class="mainlevel">Блог</a>
</li>
<li><ahref="http://mysite/index.php?option=com_weblinks&Itemid=23"
class="mainlevel">Ссылки</a>
</li>
<li><ahref="http://mysite/index.php?option=com_contact&Itemid=3"
class="mainlevel">Контакты</a>
</li>
<li><ahref="http://mysite/index.php?option=com_search&Itemid=5"
class="mainlevel">Поиск</a>
</li>
</ul>
</div> |
И снова, используя CSS, мы смогли добиться более компактного и чистого кода. Теперь, после настройки меню, осталось всего 12 таблиц. Кроме этого, используя построение меню через списки, мы облегчаем доступ к содержимому поисковым ботам, текстовым браузерам и браузерам, не поддерживающим CSS.
Другое преимущество использования CSS при построении меню - это большое количество примеров. Взять хотя бы этот ресурс - maxdesign.com - имеет более 30 примеров меню на CSS.
Вгляните на следующий код:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="tutorials/joomla-template-tutorial_8.html" id="current" name=
"current">Первый пункт</a></li>
<li><;span style="color: #009900"><a href=
"tutorials/joomla-template-tutorial_8.html">Второй пункт</a></li>
<li><a href="tutorials/joomla-template-tutorial_8.html">Третий пункт</a></li>
<li><a href="tutorials/joomla-template-tutorial_8.html">Четвертый пункт</a></li>
<li><a href="tutorials/joomla-template-tutorial_8.html">Пятый пункт</a></li>
</ul>
</div>
|
Здесь меню заключено в контейнер <ul> с идентификатором navlist, который в свою очередь заключен в контейнер <div> с идентификатором navcontainer. Давайте перед левыми модулями в нашем шаблоне добавим позицию user1.
<div id="sidebar">
<div class="inside">
<div id="navcontainer">
<?php mosLoadModules('user1',-2);?>
</div>
<?php mosLoadModules('left',-2);?>
</div>
</div> |
Обратите внимание, что мы разместили вывод модуля внутри контейнера <div id="navcontainer">, чтобы соответствовать примеру. Идентификатор контейнера может быть любой, но, для наглядности в нашем случае, мы оставили идентификатор с таким же названием. Далее, вместо <ul id="navlist"> Joomla! всегда выводит mainlevel:
Чтобы индивидуально настроить вывод модуля с меню, необходимо добавить ему css-суффикс в "Панели управления". Эта весьма полезная опция позволяет любому модулю назначить определенный суффикс, который будет использоваться при форматировании через стили. Суффикс добавляется в настройках модуля, в поле "CSS-суффикс модуля". Суффикс желательно начинать с "-" (дефис). Чтобы показать наглядно, я добавил модулю меню суффикс -leftnav:
- Если установлен стиль вывода модуля -2, то название контейнера будет выглядеть так:
- .moduletable-leftnav
- Если установлен стиль вывода модуля -3, то название контейнера будет выглядеть так:
- .module-leftnav
После небольшого форматирования меню, мой CSS выглядит так:
.moduletable-leftnav{
margin-bottom:1em;
padding:0; /*здесь отсутствуют отступы, т.к. модуль вложен в другой блок*/
border:1px#CCCsolid;
}
.moduletable-leftnav h3{
background:#666;
width:100%;
color:#fff;
padding:0.25em0;
text-align:center;
font-size:1.1em;
margin:0; /*и отрицательные margin больше не нужны*/
border-bottom: 1pxsolid#CCC;
}
#navcontainer{
padding:0;
color: #333;
}
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0;
}
#navcontainer li{
border-bottom: 1pxsolid#ccc;
margin: 0;
}
#navcontainer li a{
display: block;
padding: 3px5px3px0.5em;
border-left: 10pxsolid#333;
border-right: 10pxsolid#9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body #navcontainer li a {
width: auto;
}
#navcontainer li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10pxsolid#1c64d1;
border-right: 10pxsolid#5ba3e0;
background-color: #2586d7;
color: #fff;
} |
Документация 
