Шаг за шагом: создание привлекательного и функционального меню в Joomla

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Опубликовано:
Обновлено:
91 просмотров
0
Время на прочтение: 7 мин

Многие люди при создании своего собственного шаблона задаются вопросам: «Как лучше организовать меню?«. Некоторые используют 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;
}

Реклама. Информация о рекламодателе по ссылкам в статье.

Расскажите друзьям:

Комментарии (0)
Войдите чтобы оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *