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