Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность.

Практически все основные этапы создания шаблона пройдены. Мы переделали html-шаблон под Joomla, настроили скрипты и дизайн модулей. Последней крупной проблемой остается создание и настройка стилей меню.

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

Шаг 8. Создаем стили меню

Для начала предложу «вариант для ленивых». Если со стилями меню заморачиваться не хочется, достаточно будет установить компонент swmenufree.Это бесплатный  компонент, который позволяет довольно гибко настроить стиль меню. Думаю, разобраться с ним будет несколько проще, чем с созданием стилей вручную, но вот что будет полезнее… В общем, каждый выбирает для себя. 

В базовом шаблоне меню были построены исключительно на html. Такая конструкция очень неудобна в использовании, поскольку для добавления или удаления даже одного пункта меню, нужно изменять код шаблона. Нам же, нужно настроить стиль только одного пункта меню. Для всех остальных Joomla будет его автоматически копировать.

В базовом шаблоне всего два вида меню: левое(в левой колонке) и горизонтальное (вверху). Настроить нужно и то и другое. Начнем с левого.

Настройка стиля левого меню

Для начала нам понадобится html-код одного пункта меню из первоначального шаблона. Получить его просто, когда есть Firebug. Вот он:

<tr>

<td><table width="100%" cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td><img width="1" height="19" src="/images/spacer.gif"/></td>

<td align="right" class="submenu"><a href="#">Product Information</a></td>

</tr>

</tbody></table></td>

</tr>

К сожалению, вглядевшись в этот код, а также в картинки, еще раз можно убедиться, что базовый html-шаблон построен криво. Он использует не отдельную картинку для каждого пункта меню, а одну общую. Таким образом, чтобы добавить новый пункт в базовый шаблон, помимо редактирования кода, пришлось бы перерисовывать эту самую картинку. Это была проблема №1. Она не доставит особого труда, т.к. Вырезать кусочек из изображения легко. А вот проблема №2 гораздо серьезнее, она заключается в самом стиле меню. Видишь у каждого пункта слева оранжевый параллелограмм? Он доставит наибольшее число проблем. Почему? Попробуй ответить на этот вопрос самостоятельно…

Теперь отвечу и я. Если внимательно посмотреть, то можно понять, что первый и последний пункт меню отличаются по стилю от всех остальных. И если сделать их такими же как все, то у первого пункта в левом верхнем углу будет оранжевый треугольник, а у последнего еще и лишняя полоска. Реализовать такой стиль, конечно можно, но для этого придется лезть в дебри, хотя и без них можно запутаться. Я несколько упрощу задачу, обрезав выпирающую часть параллелограмма. Это несколько изменит стиль меню, но зато значительно упростит его создание. Итак, вот такое изображение будет использоваться для background’а пункта меню:

Теперь перейдем непосредственно к созданию стиля меню.

Всего в Joomla 1.5 предусмотрено 4 типа меню:

– список;

– наследовать – вертикально;

– наследовать – горизонтально;

– наследовать – плоский список.

Каждый из них построен по-своему. Выбор одного из типов производится в настройках модуля меню.

К сожалению, не один из этих типов не предполагает создание выпадающего меню (когда при наведении курсором на пункт выпадают его подпункты). Это можно считать одним из недостатков Joomla, поскольку такие меню довольно популярны. Так как же тогда сделать выпадающее меню? Я выделил для себя всего 2 варианта:

1. Использование стороннего скрипта меню (например можно взять одно из javascript-меню. Использование данного варианта, хоть и дает максимальные возможности, но подходит только для специалистов, потому, что подключение такого меню к Joomla – это «гремучий коктейль» аля html+css+php+javascript. Если ты хорошо владеешь всем перечисленным, то этот вариант определенно для тебя. А если нет, то смотри следующий пункт).
2. Создание выпадающего меню для типа «список» на основе css (создать такое меню хоть и проще, чем описанного в п.1, но знание css все равно необходимо. Если таковых не имеется, а создать свое выпадающее меню все же нужно, то css придется осваивать на практике).

Далее речь пойдет о втором варианте.

У меню есть 3 основных вида:

1. Обычный вид меню (когда с ним ничего не происходит);
2. Вид пункта меню, при наведении на него курсором;
3. Вид пункта меню, когда он выбран (т.е. когда на него нажали).

Каждый из этих пунктов должен быть описан отдельными css-свойствами. Правда в нашем базовом  шаблоне  все 3 вида выглядят практически одинаково. Так не интересно, и поэтому мы сделаем отдельные свойства для каждого вида, чтобы меню было более красивым.

Стиль меню должен быть универсальным. Его нужно сделать так, чтобы можно было применить к любому меню. Для этого будем использовать суффикс css-класса меню. Суффикс я сделал просто «1». Таким образом, наши css-свойства будут иметь вид «menu1».

Теперь в css-файл шаблона добавляем следующий код (этот копировать не стоит, поскольку я комментирую его не так, как допускает css. Взять его можно из шаблона, который прикреплен в конце статьи):

Вот весь добавленный код:

ul.menu1 {    // задаем стиль для основного списка(1-го уровня меню)

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: 554B71;

padding:0px;

white-space: nowrap;

list-style-type:none;

text-align:right;

margin:0px;

width:185px;

}

.menu1 li {   //задаем стиль пунктов меню

color: 554B71;

white-space: nowrap;

background: transparent url(/templates/first-template/images/1.gif) no-repeat scroll 0 0; //это наша картинка, которая служит фоном кнопок меню

list-style-type:none;

height:18px;

margin-top:-5px;

padding:3px 10px;

position:relative;

}

.menu1 li a span { // меняем цвет

color:#333333;

}

.menu1 li ul { //стиль 2-го уровня меню

left:185px;

top:5px;

position:absolute;

width:185px;

margin:0px;

padding:0px;

white-space: nowrap;

list-style-type:none;

text-align:right;

display:none; // не показывается, пока курсор не наведен на пункт

}

.menu1 li:hover, li.aaa {   // стиль непосредственно пунктов меню

white-space: nowrap;

background: transparent url(/templates/first-template/images/2.gif) no-repeat scroll 0 0;

list-style-type:none;

height:18px;

margin-top:-5px;

padding:3px 10px;

}

.menu1 li a span:hover , li.aaa a span { // при наведении на пункт меню текст меняет цвет и становится жирным

font-weight:bold;

color: #FF5421;

}

.menu1 li:hover ul, .menu1 li.aaa  ul { // показывать подпункты при наведении курсора на пункт меню

display:block;

}

ul.menu1 li{ // хак для всеми любимого IE6

scrollbar-face-color: expression(

onmouseover = function() {this.className += ' aaa'},

onmouseout = function() {this.className = this.className.replace(/ aaa/g, '')}

);

}

.menu1 li.active span { // стиль шрифта выбранного пункта меню(по которому кликнули)

font-weight:bold;

color: #FF5421;

}

.menu1 li.active span:hover { //дополнительное выделение цветом подпунктов выбранного пункта меню

font-weight:bold;

color: #FFFFFF;

}

Также нужно подправить в .inform:

padding-left: 10px;

padding-right: 10px;

Что есть что, можно разобраться немного поиграв с ним Firibug’ом. Отмечу, что вместо «ааа» может быть использована любая другая комбинация букв.

Для корректной работы меню, в модуле, который будет его выводить меню, необходимо выбрать «всегда показывать подпункты» – «да».

Вообще, стоит отдельно упомянуть о браузере Internet Explorer 6. Его ненавидят все верстальщики и web-мастера мира. Думаю именно из-за него на Билла сыплется большинство проклятий J. У IE6 есть две главные особенности:

– он ужасно кривой, и не понимает множества css-свойств так, как их нужно понимать;

– из за того, что он по-умолчанию входит в самую распространенную операционную систему в мире (Windows XP), его использует масса «продвинутых» людей.

Таким образом, благодаря «отличному» браузеру от Microsoft, все web-мастера изощряются как только могут, чтобы привести отображение сайта в IE6 к нормальному.

Нашу задачу IE6 тоже не обошел стороной. Проблема состоит в том, что свойство «hover» он понимает только применительно к ссылкам в меню. Т.е. если не использовать хак, то в IE6 при наведении курсора на пункт меню произойдет… ничего не призойдет J.

Хак, приведенный мной в коде не является совсем корректным, поскольку при проверке такого css, валидатор выдаст ошибку (что такое валидатор и для чего он нужен рассказано ниже), зато является наиболее простым. В других вариантах придется использовать дополнительный файл (найти такие варианты решения можно набрав в гугле «hover IE6»). Таким образом, если для тебя не важна 100% валидность, можешь использовать этот способ, если важна – то один из других.

Еще хочу отметить, что в данном случае выпадающее меню будет работать корректно только при уровне вложенности не более одного (это означает, что если в подпункте меню, есть еще подпункты, то они будет показываться неправильно). Решение для высокого уровня вложенности существует, но я не стал приводить его здесь, дабы совсем не запутать новичков. Найти его поможет все тот же гугл. Особенностью такого css-меню является то, что для каждого дополнительного уровня вложенности требуется писать отдельный код, так что в каком-то смысле оно не является универсальным.

Настройка стиля верхнего меню

Теперь займемся верхним меню. Стиль для него создается по аналогии. Его суффикс будет «2»:

ul.menu2 {

font-family:Arial,Helvetica,sans-serif;

font-size:13px;

font-weight:bold;

color: 554B71;

padding:0px;

white-space: nowrap;

list-style-type:none;

text-align:center;

margin:0px;

}

.menu2 li {

color: 554B71;

white-space: nowrap;

background: transparent url(/templates/first-template/images/3.gif) no-repeat scroll 0 0;

list-style-type:none;

height:22px;

padding:5px 10px;

position:relative;

float:left;

width:106px;

}

.menu2 li a span {

color:#333333;

}

.menu2 li ul {

left:0px;

top:30px;

position:absolute;

width:171px;

margin:0px;

padding:0px;

white-space: nowrap;

list-style-type:none;

text-align:center;

display:none;

z-index:2;

}

.menu2 li:hover, li.bbb {

white-space: nowrap;

background: transparent url(/templates/first-template/images/3.gif) no-repeat scroll 0 0;

list-style-type:none;

height:22px;

padding:5px 10px;

}

.menu2 li a span:hover , li.bbb a span {

font-weight:bold;

color: #FF5421;

}

.menu2 li:hover ul, .menu2 li.bbb  ul {

display:block;

}

ul.menu2 li{

scrollbar-face-color: expression(

onmouseover = function() {this.className += ' bbb'},

onmouseout = function() {this.className = this.className.replace(/ bbb/g, '')}

);

z-index:2;

}

.menu2 li.active span {

font-weight:bold;

color: #FF5421;

}

.menu2 li.active span:hover {

font-weight:bold;

color: #FFFFFF;

}

Отличия от стиля левого меню есть, но не слишком значительны. Изменена картинка фона и положения некоторых элементов. Также дополнительно введен параметр «z-index». Он нужен для того, чтобы верхнее меню при выпадении было поверх левого. Иначе получается ерунда.

Также подправляем еще некоторые css-свойства:

1) padding-left: 10px;  padding-right: 10px; (.inform)

2) в правом модуле не хватает TD и не там стоит бэкграунд:

<tr><td background="/templates/first-template/images/r3.gif" height="12"/></td>

3) не повторяется однопиксельный бекграунд – вставить в .inform: background-repeat:repeat-y;

4) размер заголовков и отступы для IE6: h3 {font-size:12px; margin:12px 0 10px 0; }

5) margin:0px; (ul) – отступ меню для IE6

6) padding-top: 0px; (.inform) – просто для красоты

7) font-size:12px; (.inform) – делаем шрифт побольше

8 ) font-size:13px;  (.base_txt) – делаем больше шрифт для статей

9) Из index.php нужно удалить яваскрипт, находящийся в заголовке и подправить title:

<jdoc:include type="head" />

10) Не забудь внести новые изображения в templateDetails.xml

Вот и все. Стили меню готовы. Конечно, остались еще мелкие недочеты, но каждый подправит их так, как захочет.

Шаг 9.  Тестирование шаблона на кроссбраузерность

Самое неприятное в создании шаблонов то, что конечный шаблон в разных браузерах может отображаться по-разному. Конечно, сегодня существуют стандарты, придерживаются разработчики браузеров, но многие люди все еще пользуются древними браузерами, которые не особо дружат со стандартами. IE6 – яркий пример. Можно было бы плюнуть на старые браузеры с лозунгом «ты пользуешься им – вот и мучайся», но конкуренция в Интернете настолько высока, что ценен каждый посетитель. Так что сайты приходится делать кроссбраузерными и терпеть все выходки «старичков». О том, как правильно протестировать наш шаблон, я писать не буду, поскольку все уже написано здесь.

Шаг 10. Тестирование шаблона на валидность

Завершающим шагом создания шаблона будет тестирование на валидность. Валидность в данном случае – это соответствие стандартам html и css. Если шаблон сделан корректно,  то при тестировании ошибок в нем не будет, а если нет, то можно узнать, где и что исправлять. Прочитать про тестирование на валидность подробно можно здесь. От себя хочу лишь добавить, что не стоит зацикливаться на 100%–ой валидности шаблона. Это лишь показатель аккуратности, но не качества. Например, попробуй проверить валидатором  google.com J .

Файлы:

конечная версия шаблона

На этом серия статей, посвященная созданию шаблонов Joomla закончена. Если ты смог пройти весь путь от первой статьи до последней, и повторить все описанное в них, то создание собственного шаблона не составит для тебя особого труда.

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

Конец.

--------------

Интернет магазин детских игрушек всегда в наличии предложит: развивающие игрушки для детей. В нашем магазине низкие цены и качественный товар.