Strict Standards: Assigning the return value of new by reference is deprecated in /home/maleon/efft.ru/docs/joom/includes/joomla.php on line 842

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/includes/joomla.php on line 710

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 122

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 123

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 124

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 125

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 126
№28. Шаблоны Joomla. Часть 7 - CMS Joomla! для начинающих
№28. Шаблоны Joomla. Часть 7
Автор Леонид Мальков   
28.08.2008 г.

Шаблоны 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.

 

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

 


Просмотров: 30234

Коментарии (11)
 
:grin :cry :(
 
надгшнм, 14:30 29 октября 2009 г.
 
[URL=http://dyyhtvia.com]tjvhpdpm[/URL] ifbquexc fagszbqd http://bqrmwklq.com zudjsxza nhywdcje
 
fccjryjj, 01:31 10 января 2010 г.
 
:x
 
апппр, 01:34 22 мая 2010 г.
 
:cry
 
Мало!, 08:45 23 мая 2010 г.
 
:cry :cry :cry :cry :cry :cry
 
hhhhhhh, 10:16 03 июня 2010 г.
 
:cry :cry :cry :cry :cry
 
up, 14:51 13 октября 2010 г.
 
:zzz :x :sigh :p 8) :zzz :upset :( :cry :eek :grin :) :roll :? :) :upset :zzz :( :cry :cry :cry :eek :grin :) :roll :? :cry :( :zzz 8) ;) :upset :p :sigh :eek :grin :) :roll :cry :( :upset ;) 8) :x :?
 
Вальдемар, 14:07 27 октября 2010 г.
 
:cry :cry :cry :cry :cry :cry :cry :cry :cry :cry
 
ол, 14:53 28 ноября 2010 г.
 
:cry :zzz :zzz :zzz :zzz :zzz :eek :zzz :eek :upset :eek :upset :cry :( :( :(
 
jj, 11:37 20 июня 2011 г.
 
8)
 
antipont, 19:54 05 декабря 2011 г.
 
:cry :cry :cry :cry
 
3, 15:36 20 сентября 2017 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 12.09.2008 г. )