На этом уроке мы разберем оформление горизонтального и вертикального меню в шаблоне trip.

Чтобы проще было работать с кодом, я решила сделать таблицы стилей для меню в отдельном файле menu.css. Этот файл должен быть помещен в папку css шаблона.

Также, для подключения стилей меню, необходимо внести дополнительную строчку в файл index.php.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/menu.css" type="text/css" />

рядом со строчкой подключения файла template.css

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Стиль оформления меню мы будем определять с помощью суффикса. Если при создании модуля меню вы не пропишите суффикс, то меню будет иметь вид списка, как у модуля «Последние новости» на скриншоте.

Для горизонтального меню обязательно нужно задать особый стиль оформления, а то вид у него будет, как на скриншоте из урока 4.

Открываем файл menu.css и прописываем в нем оформление модуля меню с суффиксом _topmenu

.moduletable_topmenu {

font:bold 14px Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-align:center;

background-color:#004f64;

height:36px;

border-bottom:4px solid #fff;}

Оформление списка меню

.moduletable_topmenu ul {

margin-top:10px;

float:left;

left:50%;

position:relative; }

Оформление блоков (пунктов) списка меню.

.moduletable_topmenu ul li {

float:left;

left:-50%;

list-style:none;

position:relative;

border-left:2px ridge #fff;

border-right:2px ridge #fff;

margin-left:-2px;}

Оформление ссылок в блоках списка меню.

.moduletable_topmenu ul li a {

display:block;

padding:0 15px;

text-decoration:none;

color:#fff;}

Ссылки при наведении

.moduletable_topmenu li a:hover{

display:block;

color:#98cfdd;

text-decoration:underline;}

Я предлагаю задать вам свой особый стиль оформления и для вертикального меню сайта. Как я писала выше, если при создании модуля вертикального меню, вы не пропишите суффикс, то меню будет иметь вид обыкновенного списка.

Оформление модуля вертикального меню с суффиксом _menu

.moduletable_menu {

font: bold 12px Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-align:left;

padding:0px;

margin:5px;}

В отличии от горизонтального меню, где, как правило, не выводится заголовок модуля, вертикальное меню часто имеет заголовок, поэтому пропишем стиль его оформления.

.moduletable_menu h3{

font: bold 12px Arial, Helvetica, sans-serif;

padding:5px 0 5px 10px;

color:#fff;

background-color:#004f64;}

Оформление блоков списка

.moduletable_menu ul li {

list-style:none;}

Оформление ссылок в блоках меню

.moduletable_menu ul li a {

display:block;

padding:10px;

text-decoration:none;

color:#004f64;

border-bottom:2px dotted #004f64;}

Ссылка при наведении

.moduletable_menu li a:hover{

display:block;

text-decoration:underline;

color:#fe1919;}

Вы можете скачать установочный комплект шаблона TRIP.

Дальнейшая работа над шаблоном не будет носить столь глобального характера, скорее это будут мелкие доработки для удобства пользования.

В следующем уроке хочу вам рассказать о симбиозе нашего шаблона TRIP и модуля представления контента News Show Pro GK4. Этот вариант пока возможен только для Joomla 2.5.