Шаблон своими руками. Часть 13.

Ну что же господа и дамы, поскольку никто из рисующих так и не захотел или не смог выделить время и нарисовать настоящий макет, а из меня дизайнер примерно такой же, как из бегемота балерина, то я с сожалением вынужден констатировать тот факт, что серия постов под общим названием "Шаблон своими руками" подошла к концу. Думаю не нужно объяснять, что верстать условные цветные квадратики на данном этапе было бы крайне глупо и бессмысленно. Однако не все так плохо и если подумать, то работы все же сделано немало. У тех, кто успешно дошел до этой части на сегодняшний день по идее имеется весьма неплохой каркас, на основе которого можно строить практически все что угодно. Что же касается моего учебного макета, то из нарисованного с самого начала остался только один модуль — "Главное меню", который и закончит этот цикл.

Итак. Напоминаю, что согласно макета в главном меню вместо текста "Главная" должен быть рисунок, активный пункт верхнего уровня должен быть подсвечен чем-то типа лампочки, кроме того все надписи должны иметь градиент и разделитель:


Очевидно, что одной только правкой css тут явно не обойтись, поэтому начнем с самого начала, а вернее с шаблона вывода модуля меню — файла mod_menu.tpl. Естественно повторять здесь весь код этого файла не имеет совершенно никакого смысла, поэтому уже измененный файл вы можете взять отсюда и если хотите, можете сравнить его с оригиналом чтобы увидеть все изменения, а здесь я перечислю только самые значимые и вкратце опишу почему я поступил именно так, а не иначе.

1. Подключение jquery.treeview.css ликвидировал, поскольку если не вдаваться в подробности и говорить кратко, то место, в котором этот файл используется, я не нашел. Поправьте меня если я не прав...
2. Вывод слова «Главная» пришлось прибить физически из-за странного в последнее время поведения браузера Opera. Никакими силами заставить его принять text-indent я не смог. Возможно в следующих версиях разработчики это дело исправят, а пока пусть будет так как есть.
3. Все title убрал потому что мне не нравятся некрасивые всплывающие подсказки. Влияние или не влияние этих штук на СЕО я не учитывал, поэтому если вы считаете, что они там должны быть, то просто верните их на место.
4. Последний закрывающий тэг </ul>, который в оригинальном файле находится на строке 41 по всей видимости лишний. Не могу утверждать на 100% так как совсем уж досконально mod_menu.tpl не изучал и возможно при каком-то неведомом мне раскладе меню он все таки нужен, но в текущей конфигурации он явно мешает и я его убрал.
5. Ну а <span> в ссылки пунктов первого уровня добавлен по вполне очевидной причине, к каждому пункту нужно прикрутить два фоновых рисунка — разделитель и подсветку. На самом деле их три, еще и градиент, но вводить элемент по него в mod_menu.tpl я не буду, так как это будет сделано другим способом.

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

Итак, первое это уже упомянутый чуть выше градиент. По опыту футера вы должны помнить, что для наложения градиента нужен некий блок, который накладывается поверх надписи. В данном случае в качестве такого блока с легкостью можно было бы использовать псевдоэлемент(:after или :before), но проблема в том, что в любимом IE такой элемент поведет себя совсем не так как вы того ожидаете. Описывать этот маразм я не буду, но если хотите, то можете поэкспериментировать .

И второе. Без применения введенных в css3 трансформаций(transform) раскрытие подуровней меню при наведении(по :hover) будет выглядеть достаточно резким и некрасивым… Думаю дальше даже писать не стоит, опять IE впереди всех, а вы и так уже все поняли. В общем как бы там ни было, но красивостей все-таки хочется, поэтому вышеперечисленные проблемы будут с легкостью решены при помощи JavaScript чуть ниже, а пока что переходим непосредственно к стилям:



Ну и напоследок несколько вынужденных строк кода, о которых уже говорилось выше и которые как всегда нужно положить в файл include.js:



На этом я закончил. Итоговый результат проделанной работы какое-то время повисит по этому адресу, смотрите, сравнивайте, делайте выводы. Хост иногда глючит поэтому если не открывается, то попробуйте вот так. Тут же можете забрать недостающие картинки для главного меню, firebug еще никто не отменял. Если относительно этой темы имеются вопросы, то в общем то как всегда, либо здесь в личку, либо в аську 192-562-615. Последнее предпочтительнее. Золотые горы конечно не обещаю, но если будет время, то помогу.

Ну и конечно же если вдруг вы посчитаете, что предоставленная в 13 частях информация была для вас сколь ни будь полезна, то в благодарность можете положить на один из этих кошельков сколько посчитаете нужным. Буду рад любой поддержке:

Желаю всем удачи...