Изменяем внешний вид меню в Joomla

Начинаем с того, что устанавливаем шаблон. Открываем сайт с установленным шаблоном в браузере. Просматриваем код (для этого щелкаем правой кнопкой в окне и выбираем «просмотр html кода»). Находим код меню и копируем его в ваш любимый html – редактор. В первоначальном виде код выглядит так:

HTML

<!--меню-->
<div class="moduletable">
 <h3>Главное меню</h3>
  <ul class="menu">
   <li id="current" class="active item1"><a href="http://testtemplate.ru/"><span>Главная</span></a></li>
   <li class="parent item27"><a href="/index.php?option=com_content&view=article&id=19&Itemid=27">

   <span>Описание Joomla!</span></a></li>
   <li class="item2"><a href="/index.php?option=com_content&view=article&id=5&Itemid=2">
    <span>Лицензия Joomla!</span></a></li>
   <li class="item37"><a href="/index.php?option=com_content&view=section&id=4&Itemid=37">
   <span>Сведения о Joomla!</span></a></li>
   <li class="item41"><a href="/index.php?option=com_content&view=section&id=3&Itemid=41">
   <span>FAQ</span></a></li<
   <li class="item50"><a href="/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50">
   <span>Новости</span></a></li>
   <li class="item48"><a href="/index.php?option=com_weblinks&view=categories&Itemid=48">
   <span>Ссылки</span></a></li>          
   <li class="item49"><a href="/index.php?option=com_newsfeeds&view=categories&Itemid=49"&>
   <span>Ленты  новостей</span></a></li>
 </ul>
</div>			
<!--конец меню-->

Нам нужно удалить из кода все значения аттрибутов href у ссылок, заменив их на символ «#».

HTML

<!--меню-->
<div class="moduletable">
 <h3>Главное меню</h3>
  <ul class="menu">
   <li id="current" class="active item1"><a href="#"><span>Главная</span></a></li>
   <li class="parent item27"><a href="#"><span>Описание Joomla!</span></a></li>
   <li class="item2"><a href="#"><span>Лицензия Joomla!</span></a></li>
   <li class="item37"><a href="#"><span>Сведения о Joomla!</span></a></li>
   <li class="item41"><a href="#"><span>FAQ</span></a></li>
   <li class="item50"><a href="#"><span>Новости</span></a></li>
   <li class="item48"><a href="#"><span>Ссылки</span></a></li>
   <li class="item49"><a href="#"><span>Ленты  новостей</span></a></li>
 </ul>
</div>
<!--конец меню-->

Получили «очищенный» код — с ним и будем работать.Теперь нам нужно определиться все ли меню мы хотим изменить или только одно. Если только одно, нам нужно присвоить ему суффикс класса. Это делается в системе (Расширения ► менеджер модулей). Находим нужный модуль (в нашем случае «Главное меню»), открываем, и в разделе Параметры ► расширенные параметры, указываем суффикс класса — в нашем случае «_menu». Контейнер div после добавления суффикса теперь имеет класс «moduletable_menu».

Пока мы отсюда не вышли нам нужно отключить заголовок меню, чтобы он не появлялся выше всех пунктов меню.

Идем далее. Мы хотим, чтобы наше меню выглядело вот так:

Наша задача сделать так, чтобы применив несколько правил css, наше меню, код которого мы сохранили, выглядело как меню на рисунке. Сначала уберем все отступы у всех элементов на странице и присвоим все текстовым элементам одинаковый размер шрифта:

CSS

*{
  margin:0;
  padding:0; 
  font-size:100%;
 }
body{
 font:.9em Arial, Helvetica, sans-serif;
}

Дело в том, что у каждого элемента по умолчанию заданы значения свойств margin и padding, причем в разных браузерах они разные, поэтому это обнуление свойств необходимо делать при верстке любых html - страничек, для того, чтобы потом не было сюрпризов с неизвестно откуда взявшимися пробелами и отступами у элементов.

Далее указываем следующие правила нашему списку:

CSS

.moduletable_menu{
  padding: 1px;
  font: bold .8em Verdana, sans-serif;
  border: 2px solid;
  border-color: #aaa #666 #666 #aaa;
  background: #ccc;
  width: 13em;
}
.moduletable_menu li{
  list-style: none;
  padding: 0.25em 1em;
  border: 1px solid;
  border-color: #fff #aaa #aaa #fff;
  text-align: center;
}
.moduletable_menu li a{ 
  text-decoration: none; 
}
.moduletable_menu li a:link{
  color: black;
}
.moduletable_menu li a:visited{
  color: gray; 
}

Сохраняем и смотрим, что у нас получилось в браузере:

Так как мы обнули все отступы наше меню плотно пристыковано к верхней левой точке окна браузера. Такой же вид у него будет, когда мы изменим стили меню в системе, оно будет плотно прилегать к границам своего контейнера, поэтому мы применим следующее правило к div.moduletable_menu, создав вокруг него небольшие отступы:

CSS

 
.moduletable_menu{
  margin:.5em;
  padding: 1px;
  font: bold .8em Verdana, sans-serif;
  border: 2px solid;
  border-color: #aaa #666 #666 #aaa;
  background: #ccc;
  width: 13em;
  }

Теперь нам нужно поместить код сss, который мы написали в систему. Для этого в строенном редакторе редактируем файл стилей.

Расширения ► Менеджер шаблонов ► щелкаем по имени нашего шаблона (он выбран по умолчанию) и выбираем в верхнем меню пункт «Редактировать css».

Так как в тестовом шаблоне к элементам не применяются стили, файл template.css пустой.

Копируем наш код css в этот файл во встроенном редакторе. Нажимает кнопку «сохранить»(если вы больше ничего не хотите поменять в файле стилей, если вы еще не закончили редактировать файл стилей нажимаем кнопку «применить» - дело в том, что если нажать «сохранить», система присвоит файлу стилей атрибут «только для чтения» и редактировать вы его сможете только после того как снимите этот атрибут через файловый менеджер). Затем можно увидеть результат наших стараний, нажав на ссылку «Просмотр».Вот что мы видим:

Меню до изменения	Меню после изменения

Как мы и хотели – изменилось только одно «Главное меню».

Скачать шаблон и html–код меню.