Публикации

Пользователь:

Пароль:


Запомнить

Регистрация
Забыли пароль?



Пользователей: 3919
Новичок: KuznecJRC
Поддержи проект
Поддержите проект Webmoney
R197422573540
E197270426287
Z701768662172
Сказали «Спасибо»

Многоуровневое css-меню


Автор: Metaller
 9.0 - 11 голосов -

Очень часто на форуме задается вопрос – как в е107 сделать вложенное многоуровневое меню.

Кто-то использует подобное меню вместе с темой Jayya, кто-то ставит tree_menu, другие идут дальше и ставят плагины наподобие q_tree_menu. Но почти во всех из них есть свои недостатки – в первом случае вместе с меню комплектом идет тема Jayya и никуда ты от нее не денешься, если хочешь пользоваться меню, во втором случае – скудный дизайн и всего два уровня вложенности, в третьем проблем еще более – меню часто глючит в IE, не работает, если на сайте используется флеш, если сайт медленно загружается, меню может оказаться в центре сайта, а не на положенном ему месте.

В этой статье я предлагаю в меру простой, достаточно универсальный, кросс-браузерный и главное, удовлетворяющий современным тенденциям построения навигационных меню способ – многоуровневое CSS меню.

Пропустим всю теорию (кому она интересна, в статье я приведу ссылки по теме) и сразу перейдем к практике.

HTML код меню

Структурно, навигационные меню представляют собой списки ссылок, и следовательно должны оформляться как таковые. HTML-код простого одноуровневого навигационного меню представляет из себя простой ненумерованный список

+ Показать


Создадим более детализованное меню. Добавим в раздел "Файлы" подразделы "Правила", "Скачать файлы" и "Загрузить файл", а в раздел "Галерея" подразделы "Вся галерея", "Самые популярные", "Прислать фото".

В этому случае приведенный выше код модифицируется, появятся вложенные списки

+ Показать


По аналогии мы можем реализовать меню любого уровня вложенности.

Создание структуры меню в Админцентре

Теперь реализуем ту же самую структуру в админке сайта. Открываем ссылки сайта и создаем ссылки первого уровня. В качестве родителей для этих ссылок указываем "Нет родителя (нормальная ссылка)". Теперь создаем вложенные ссылки - для ссылок "Файлы" подразделы "Правила", "Скачать файлы", "Загрузить файл" в качестве родителя выбираем "Файлы", соответственно для ссылок "Вся галерея", "Самые популярные", "Прислать фото" родителем станет "Галерея".

Мы можем создать еще какое угодно количество ссылок и выбирать для них родителями уже созданные ссылки 2 уровня "Правила", "Скачать файлы", "Вся галерея" и т.д., реализовывая таким образом разветвленную древовидную структуру неограниченной вложенности.



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

Программирование

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

Для этого создадим в папке нашей темы файл "navi.sc". Это файл шоткода для будущей навигации. Открываем файл в текстовом редакторе и помещаем в него следующий код

+ Показать


Данный код представляет собой простую рекурсивную функцию (функция вызывает сама себя), которая и позволяет построить нужное навигационное дерево. Какая бы не была глубина вложенности, функция будет вызывать себя сколько необходимо раз, чтобы построить все уровни навигационного меню.

Не вдаваясь более в подробности скажу одно: "чтобы понять рекурсию, нужно сначала понять рекурсию...".

Функция делает выборку из базы данных, проверяет классы пользователей, вставляет иконки для ссылок. Кроме того для каждой иконки мы присвоили класс class ='menu_img' чтобы использовать его в дальнейшем в CSS файле и управлять отображением иконки, изменить отсутупы и т.п. Для тегов LI которые имеют вложенные меню (в нашем случае у разделов "Файлы" и "Галерея") добавляется класс class='sub', который тоже может быть использован в CSS.

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

Модификация theme.php

Вот мы и добрались до модификации файла тема. Открываем файл theme.php темы, с которой будем работать. Первое что необходимо сделать - это зарегистрировать в системе шоткод, который мы написали в файле "navi.sc". Для этого где нибудь в первых строках пишем $register_sc[]= "NAVI";

Теперь вставляем наш шорткод в то место, где будет выводится новое навигационное меню. Мы смело можем удалить стандартный шорткод
  1. {SITELINKS}
который используется для вывода стандартного меню и на его место вставить свой
  1. {NAVI}
, например так:

  1. <div class="menu">{NAVI}</div>


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

Замечание:

Вы можете использовать данный шоткод для вывода двух и более независимых друг от друга навигаций. Для этого при создании ссылок в админке выбирайте разные "Категории ссылок" для каждой группы, а затем используйте {NAVI=1}, {NAVI=2} ... для вывода навигации для соответствующей категории.

Чтобы отличать одно меню от другого и использовать для каждого свое CSS-оформление, можно выводить их с разными классами обрамляющего тега DIV.

  1. <div class="menu1">{NAVI=1}</div>
и
  1. <div class="menu2">{NAVI=2}</div>


Сохраняем тему и посмотрим что получилось.



Не совсем то что мы хотели. Но без паники, потому что мы приступаем к следующему параграфу, в котором произойдет магическое преображение меню.

CSS стайлинг

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) мощнейшая технология, позволяющая невообразимым образом изменить внешний вид привычного HTML-кода.

Разъяснение основ CSS и описание способа создания навигационного меню из списка выходит за рамки данной статьи. Мы воспользуемся уже готовым результатом. Для любознательных могу порекомендовать статью "CSS Design: Укрощение списков" , Выпадающие меню с помощью CSS .

Создадим в папке темы файл с именем "dropdown.css" и поместим в него следующий код

+ Показать


Графические файлы, необходимые для данной таблицы стилей, кладем в папку изображений темы, в случае необходимости изменяем пути к ним (например здесь background:url(i/ bullet_greensqr.gif) - картинка пимпочки перед каждым пунктом меню в выпадающем списке, положите свое изображение при необходимости)

Стоит заметить, что класс menu который мы используем в данном файле, так же используется и в некоторых стандартных темах движка (например в Jayya), поэтому чтобы избежать перекрытия стилей, можно переименовать в нашем dropdown.css все .menu на .menux (через функцию автозамены), а так же в theme.php заменить на
  1. <div class="menux">{NAVI}</div>


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


Смотрим, что получилось - именно то, к чему мы стремились, кроссбраузерное многоуровневое CSS-меню.

Меняя стили в файле dropdown.css можно невообразимым образом изменить внешний вид меню, поменять цвета и ориентацию меню.

Примеров выпадающих меню в интернете масса, достаточно поискать по ключевым словам "css dropdown menu", "css меню" и т.п.

Ложка дегтя

Пользователи "браузера" IE наверное уже кроют меня последними словами, потому что ничего на самом деле у них не работает, и все не так, как я написал выше. Скажем спасибо своему браузеру за то что он неверно обрабатывает CSS-свойство :hover для тега LI, в результате чего подменю не выпадает, хотя должно бы.

Исправляем ситуацию. Создаем в папке темы файл csshover.htc со следующим содержимым:

+ Показать


В файл dropdown.css дописываем
  1. body { behavior:url("csshover.htc"); }


Теперь меню работает во всех браузерах.

В следующих сериях (возможно)

* Снижаем нагрузку на базу путем кеширования меню
* Избавляемся от использования .htc компонента, переходим на чистый CSS
* Еще больше крутизны - используем ява-скриптовые библиотеки для создания визуальных эффектов в меню