Все выпуски  

Шаблоны Joomla. Часть 7.


Шаблоны Joomla. Часть 7.
(СТИЛЬНЫЙ дизайн НА таблицах. Вертикальное меню)

Каталог недвижимости РУССКИЙ ДОМ - реальный шанс продать или купить дом в Тверской области!

Уровень: Пользователь - Веб-мастер

Здравствуйте, уважаемые подписчики. Сегодня мы начинаем разговор о стилевом оформлении меню сайта. И продолжим воспроизводить дизайн сайта MailList.ru То есть сегодняшний выпуск является логическим продолжением предыдущего выпуска №27. Шаблоны Joomla. Часть 6. И дорабатывать мы будем наш учебный шаблон efft_table_27 (cкачать efft_table_27).

Виды меню в Джумле

Меню в Джумле создается в одноименном пункте Главного меню админки. При создании меню автоматически создается модуль, связанный с этим меню, который доступен в пункте Главного меню Модули > Модули сайта. В дистрибутиве Джумлы уже заведены следующие меню (название меню / название модуля): mainmenu / Главное меню, othermenu / Дополнительное меню, topmenu / Верхнее меню, usermenu / Меню пользователя.

Под видами меню мы будем подразумевать стили модулей меню. Что это? В пункте Главного меню Модули > Модули сайта откройте любой из указанных выше модулей меню, найдите его параметр "Стиль меню", который может принимать следующие значения: Вертикально, горизонтально, плоский список. Сегодня мы разбираем вертикальный стиль меню.

Вертикальное меню

Любому меню сайта можно задать любой стиль. Мы будем сегодня экспериментировать с Главным меню. Откройте сайт с установленным учебным шаблоном. Если посмотрите код страницы, выводящий главное меню, то увидите примерно следующее:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://joomla/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Главная</a></td></tr>
<tr align="left"><td><a href="http://joomla/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://joomla/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://joomla/index.php?option=com_content&amp;task=blogsection&amp;id=0&amp;Itemid=9" class="mainlevel" >Блог</a></td></tr>
<tr align="left"><td><a href="http://joomla/index.php?option=com_weblinks&amp;Itemid=23" class="mainlevel" >Ссылки</a></td></tr>
<tr align="left"><td><a href="http://joomla/index.php?option=com_contact&amp;Itemid=3" class="mainlevel" >Контакты</a></td></tr>
<tr align="left"><td><a href="http://joomla/index.php?option=com_search&amp;Itemid=5" class="mainlevel" >Поиск</a></td></tr>
<tr align="left"><td><a href="http://joomla/index.php?option=com_newsfeeds&amp;Itemid=7" class="mainlevel" >Ленты новостей</a></td></tr>
</table>

Оцениваем увиденное:

  • меню сверстано в виде таблицы;
  • ссылки в меню имеют класс "mainlevel";
  • пункт, указывающий текущую страницу или раздел имеет id="active_menu".

Вот и определились, какие стили будем настраивать. Заметим, что в Джумле может быть и двухуровневое меню, в котором подпункты будут иметь класс "sublevel". Мы остановимся на одноуровневом.

Стили ссылок класса "mainlevel"

Вот стили, а комментарии ниже:

a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {
color:#663300;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:900;
text-decoration: underline;
x background-color:red;
}
a.mainlevel:hover {
color:#FF6A00;
}
  • ":link" и т.д. - это состояния ссылок: ":hover" - ссылка с наведенной на нее мышью, ":visited" - ссылка, по которой Вы уже переходили, ":link" - ссылка, по которой Вы еще НЕ переходили;
  • цвет и стили font - идентичные maillist.ru;
  • text-decoration: underline - текст ссылки с подчеркиванием;
  • закомментированный стиль background-color (понадобится нам в следующем выпуске);
  • заметили, что мы переопределяем стиль "a.mainlevel:hover", а точнее изменяем только цвет ссылки, при наведении на нее мыши.

Стиль для ссылки активного пункта меню (id="active_menu")

В maillist.ru активный пункт меню НЕ имеет уникального стиля. Задаем стиль на свой вкус (без подчеркивания, оранжевого цвета, начертание курсивом):

#active_menu {
text-decoration: none;
color: #FF6A00;
font-style:italic;
}

Готово или нет?!

Приглядываемся к mailist.ru Там пункты меню расположены плотнее, чем в нашем шаблоне. Чисто из-за спортивного интереса выясним, каким образом нам сделать также, но сделаем это в следующем выпуске, который выйдет примерно через 1 неделю.

Чтобы увидеть разобранные сегодня стили в действии, скопируйте их (если Вы этого еще не сделали :) в шаблон efft_table_27.

 

Автор данной статьи: Леонид Мальков

 


В избранное