Матвей Земсков

Заметки веб-мастера

Вторник, 30 июня 2009 00:10

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

Оцените материал
(2 голосов)

Если по какой-либо причине вас не устраивает внешний вид меню в шаблоне Joomla, не обязательно менять весь шаблон целиком, можно обойтись только изменением самого меню, которое вам не нравится.

В этой статье я продемонстрирую как это можно сделать. Для этого нам понадобится: сайт на Joomla (я использую сайт с демо-данными и стандартным шаблоном, который вы можете скачать и установить в CMS).

Начинаем с того, что устанавливаем шаблон. Открываем сайт с установленным шаблоном в браузере. Просматриваем код (для этого щелкаем правой кнопкой в окне и выбираем «просмотр 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».

Параметры модуля CMS Joomla 1.5

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

Отключаем заголовок у модуля CMS Joomla 1.5

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

Будущее меню сайта под управлением Joomla 1.5

Наша задача сделать так, чтобы применив несколько правил 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–код меню.

Прочитано 24786 раз

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


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: