В этой статье я расскажу о том, как можно сделать собственный стиль меню Joomla и подключить его для использования, а также протестировать шаблон.
Шаблоны 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’а пункта меню:

1

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

Всего в 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 закончена. Если ты смог пройти весь путь от первой статьи до последней, и повторить все описанное в них, то создание собственного шаблона не составит для тебя особого труда.

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

Конец.

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # Тестирование на валидность и кроссбраузерность.Константин 28.03.2014 06:20
Google и Яndex не поймут что это меню, это плохо влияет на позиции сайта
Ответить | Ответить с цитатой | Цитировать
0 # вопрос по урокуkadrovik 29.06.2013 03:15
Здравствуйте, изучил серию уроков "Шаблоны Joomla", не понятным остался "Шаг 8. Создаем стили меню."., а именно - в файле CSS создаете классы menu1 и menu2 и правила для них, но в файле index.php Вы их не где не подключаете, каким образом они влияют на стиль меню???
Ответить | Ответить с цитатой | Цитировать
0 # RE: вопрос по урокуWedal 12.08.2013 06:56
kadrovik, классы не подключаются отдельно. Подключается только CSS-файл. После подключения все имеющиеся в нем классы будут применены автоматически.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. wladimir 02.03.2011 12:56
Почему-то не хотят отображаться стили меню, стоит Joomla 1.5.22
Хотя сами модули выводятся и скрываются (когда не используются).
Установка готового варианта first-template дает такой же результат...
В чем может быть проблема?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. Wedal 03.03.2011 06:10
wladimir, скорее всего в модуле меню вы не указали суффикс класса модуля или меню. Посмотрите внимательно на классы, которые описаны в этой статье и на те, которые появляются при генерации станицы у вас на сайте(я про меню).
Ответить | Ответить с цитатой | Цитировать
0 # Как сдвинуть текстВладимир 12.12.2010 20:31
Никак не могу сдвинуть только текст в меню, все картинки сдвинул как мне надо а вот текс не могу опустить на несколько пикселей, сдвигается вместе с беграундом 2
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как сдвинуть текстWedal 13.12.2010 05:30
Владимир, с такой задачей через комментарии справится сложно. Если действительно хотите подсказку, сохраните вашу html-страничку и выложите ее на форуме с подробным описанием того, что нужно получить.
Ответить | Ответить с цитатой | Цитировать
0 # ПодменюОльга 15.08.2010 12:38
Wedal, подскажите, пожалуйста, если "выплывающее" подменю уходит как-будто под сайт (видно только небольшой его кусок), в чём может быть причина. Пыталась менять position и z-index, но может быть не те.
Ответить | Ответить с цитатой | Цитировать
0 # RE: ПодменюWedal 15.08.2010 13:02
Ольга, тут так не скажешь. Нужно смотреть.
Ответить | Ответить с цитатой | Цитировать
0 # RE: ПодменюОльга 20.08.2010 21:23
Наконец-то моя проблема решилась. Всего лишь необходимо было выставить "overflow:visible и z-index:10000" в блочном элементе (у меня он sidebar1).
Wedal, спасибо за такой сайт.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. Kucha 01.07.2010 10:03
А есть ещё какие то модули для создания меню кроме swmenu такого плана? А то в бесплатной версии можно создать только одно меню? А как быть есть нужно ещё одно.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. Wedal 04.07.2010 03:55 Ответить | Ответить с цитатой | Цитировать
+1 # RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. Анна 12.05.2010 07:50
Wedal, в лисичке все отлично. В хроме перекошены таблички, текст вылезает :( http://img217.imageshack.us/img217/9885/87191512.jpg
Как лечится?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Шаблоны Joomla. Часть 5.Создание стилей меню. Тестирование на валидность и кроссбраузерность. Wedal 12.05.2010 08:01
Анна, в хроме не проверял. Только в FF, опере и ослике. Как лечиться трудно сказать. Править шаблон. Увеличивать отступы и.т.д. Конечный шаблон далеко не идеален, когда я писал эту серию, то целью ставил именно показать то, как делать шаблоны. Остальное - дело верстальщика.
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 27.01.2010 06:44
Spence, это очень индивидуально. Нужно смотреть шаблон. Используйте Firebug и все увидите.
Ответить | Ответить с цитатой | Цитировать
0 # Spence 25.01.2010 11:50
Добрый вечер!
Скажите пожалуйста,а как применить стиль css к каждой странице сайта,а не только к главной,а то у меня при открытии,например,пункта меню "новости" пропадает футер,и задний фон меню,и такое впечатление что css только применен к главной странице.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 20.01.2010 14:57
Елена, посмотрите статью Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента. Подобный вопрос уже был и поэтому в конце той статьи я написал, что сделать для корректного отображения.
Ответить | Ответить с цитатой | Цитировать
0 # Елена 20.01.2010 05:16
Не совсем поняла про выпадающее меню, что нужно сделать в админке самой joomla что бы оно корректно отображалось?
Ответить | Ответить с цитатой | Цитировать
+1 # марина 30.12.2009 09:49
спасибо. очень познавательно.
поставлю ссылку на ваш сайт. но так как моему сайту пока пару дней - то поставлю позже когда сделаю раздел о создании сайтов в инете!
Вы помогаете таким "блондикам" как я! Хотя я брюнетка...
Подписываюсь на рассылку... буду ждать выпусков...
Удачи в новом 2010 году!!!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх