Создание меню Joomla
(Пока оценок нет)
Загрузка...
Многие люди при создании своего собственного шаблона задаются вопросам: «Как лучше организовать меню?«. Некоторые используют Flash-меню, некоторые вставляют JavaScript-меню. Я не люблю использовать эти элементы в своих работах, мне нравится чистый код, не обременённый лишними файлами. Но, как тогда сделать удобное, лёгкое меню? Все очень просто: через CSS!
Есть много способов создания меню с помощью CSS, в основе большинства которых лежит использование списков (с помощью тегов <li>). Один из таких приёмов мы сейчас и рассмотрим ниже.
В Joomla! вывод меню оформляется и контролируется через [модули]. При создании нового меню, автоматически будет создан модуль с таким же названием, что и меню. В любом модуле есть настраиваемые параметры, изменяя которые, можно добиться изменения стиля отображения меню. Нужный нам модуль называется mod_mainmenu. Наиболее важный параметр модуля — это «Стиль меню«.
Существует три стиля меню:
- Вертикальный — Меню выводится в вертикальной таблице
- Горизонтальный — Меню выводится в горизонтальной таблице
- Плоский список — Меню формируется через маркированный список (тег <ul>)
Так выглядит вывод меню через таблицы — или вертикальную, или горизонтальную:
<div class="moduletable">
<h3>Главное меню</h3>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_frontpage&Itemid=1"
class="mainlevel" id="active_menu">Главная</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_content&task=view&id=5&Itemid=6"
class="mainlevel">Лицензия Joomla!</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_content&task=section&id=1&Itemid=2"
class="mainlevel">Новости</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_content&task=blogsection&Itemid=9"
class="mainlevel">Блог</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_weblinks&Itemid=23"
class="mainlevel">Ссылки</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_contact&Itemid=3"
class="mainlevel">Контакты</a>
</td>
</tr>
<tr align="left">
<td><a href="http://mysite/index.php?option=com_search&Itemid=5"
class="mainlevel">Поиск</a>
</td>
</tr>
</tbody>
</table>
</div>
А вот так выглядит плоский список:
<div class="moduletable">
<h3>Главное меню</h3>
<ul id="mainlevel">
<li><a href="http://mysite/index.php?option=com_frontpage&Itemid=1"
class="mainlevel" id="active_menu">Главная</a>
</li>
<li><a href="http://mysite/index.php?option=com_content&task=view&id=5&Itemid=6"
class="mainlevel">Лицензия Joomla!</a>
</li>
<li><a href="http://mysite/index.php?option=com_content&task=section&id=1&Itemid=2"
class="mainlevel">Новости</a>
</li>
<li><a href="http://mysite/index.php?option=com_content&task=blogsection&Itemid=9"
class="mainlevel">Блог</a>
</li>
<li><a href="http://mysite/index.php?option=com_weblinks&Itemid=23"
class="mainlevel">Ссылки</a>
</li>
<li><a href="http://mysite/index.php?option=com_contact&Itemid=3"
class="mainlevel">Контакты</a>
</li>
<li><a href="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">Первый пункт</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> <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:
<ul id="mainlevel">
Чтобы индивидуально настроить вывод модуля с меню, необходимо добавить ему css-суффикс в «Панели управления». Эта весьма полезная опция позволяет любому модулю назначить определённый суффикс, который будет использоваться при форматировании через стили. Суффикс добавляется в настройках модуля, в поле «CSS-суффикс модуля«. Суффикс желательно начинать с «-» (дефис). Чтобы показать наглядно, я добавил модулю меню суффикс -leftnav:
- Если установлен стиль вывода модуля -2, то название контейнера будет выглядеть так:
- .moduletable-leftnav
- Если установлен стиль вывода модуля -3, то название контейнера будет выглядеть так:
- .module-leftnav
После небольшого форматирования меню, мой CSS выглядит так:
.moduletable-leftnav{
margin-bottom:1em;
padding:0; /*здесь отсутствуют отступы, т.к. модуль вложен в другой блок*/
border:1px #CCC solid;
}
.moduletable-leftnav h3{
background:#666;
width:100%;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0; /*и отрицательные margin больше не нужны*/
border-bottom: 1px solid #CCC;
}
#navcontainer{
padding:0;
color: #333;
}
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0;
}
#navcontainer li{
border-bottom: 1px solid #ccc;
margin: 0;
}
#navcontainer 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 #navcontainer li a {
width: auto;
}
#navcontainer 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;
}
