Действия

Создание меню

Материал из База знаний Joomla

Статья руководства Создание шаблона Joomla


Создание шаблона Joomla 1.0.х
Руководство

CMS Joomla - внешний вид

Оглавление учебника

Приложения

Любая перепечатка учебника или его части запрещена без согласия администрации Joom.ru


Многие люди при создании своего собственного шаблона задаются вопросам: "Как лучше организовать меню?". Некоторые используют 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&amp;Itemid=1" 
           class="mainlevel" id="active_menu">Главная</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6" 
           class="mainlevel">Лицензия Joomla!</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2" 
           class="mainlevel">Новости</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_content&amp;task=blogsection&amp;Itemid=9" 
           class="mainlevel">Блог</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_weblinks&amp;Itemid=23"
           class="mainlevel">Ссылки</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_contact&amp;Itemid=3" 			       
           class="mainlevel">Контакты</a>
    </td>
  </tr>
  <tr align="left">
    <td><a href="http://mysite/index.php?option=com_search&amp;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&amp;Itemid=1"
         class="mainlevel" id="active_menu">Главная</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6"
         class="mainlevel">Лицензия Joomla!</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2"
         class="mainlevel">Новости</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_content&amp;task=blogsection&amp;Itemid=9"
         class="mainlevel">Блог</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_weblinks&amp;Itemid=23" 	
         class="mainlevel">Ссылки</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_contact&amp;Itemid=3" 	 
         class="mainlevel">Контакты</a>
  </li>
  <li><a href="http://mysite/index.php?option=com_search&amp;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;
}


Вернуться: Модули в шаблонеДалее: Сокрытие областей шаблона