Блог о WordPress от Тараса

За последнее время сразу несколько человек поинтересовались у меня, а не в курсе ли я, как делать выпадающие меню в WordPress? Я честно отвечал “Нет”, потому что с содроганием вспоминал, как когда-то, на заре изучения web-кодинга, пытался сделать более-менее нормальное выпадающее меню. Триста раз проклял я тогда и java-script, и html, и, конечно же, все браузеры.

Но раз люди спрашивают, то появляется жгучее желание им помочь, вот и полез раскапывать, как дела обстоят сейчас и что новенького умные дядьки намутили, и даже, знаете ли, нашёл. Причём нашёл и очень сильно удивился тому, как это было сделано - вот что значит мало практиковать вёрстку и работать с CSS, потому что, по сути, для того, чтобы намудрить ОТЛИЧНОЕ выпадающее меню, достаточно знать:
а) как делать ненумерованные списки в html (<ul></ul>)
б) уметь копипастить файл-стилей

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

Шаг 1. Готовим список пунктов меню руками

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

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

//Внешний список
<ul class="nav" id="nav-one">
<li>
//Текст ссылки первого элемента
<a href="#item1">item 1</a>
//Внутренний список для первого элемента
<ul>
//Первый под-элемент
  <li><a href="#item1.1">item 1.1</a></li>
//Второй под-элемент
    <li><a href="#item1.2">item 1.2</a></li>
    <li><a href="#item1.3">item 1.3</a></li>
    <li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li>
//Текст ссылки второго элемента
<a href="#item2">item 2</a>
//Внутренний список для второго элемента
    <ul>....</ul>
</li>
//Ну и так далее
</ul>

Всё просто и, я думаю, дополнительные разъяснения не требуются, главное не забыть указать у внешнего меню class=”nav” и id=”nav-one”.

Шаг 2. Стилизуем списки

Сам файл стилей не слишком большой, но между тем целиком код в блоге я приводить не хочу, поэтому советую для дальнейшей беседы скачать файл стилей, а я буду просто рассказывать про принцип работы, ссылаясь на него.
Берём файл sfstyle.css и открываем блокнотом или любым другим редактором (если кому интересно, то я использую Zend Development Environment или, проще говоря, ZDE).
Ну что же, приступим.

Первым делом уберём у всевозможных списков все отступы и прочие списочные атрибуты, это делается в .nav, .nav ul. После чего выводим их в строчку, а не как обычно, за это у нас отвечает float:left; в .nav li. Сразу обращу внимание на то, что мы везде применяем относительное (relative) позиционирование (position), чтобы элементы появлялись в строго заданных им местах, относительно родительских элементов.

Теперь нам необходимо спрятать внутренние списки с глаз долой и отображать их только при наведении. Тут мне попалось два способа:
1) Найденый на A List Apart - для вложенных ul элементов устанавливаем атрибут display:none;, а при наведении (li :hover ul) возвращаем в нормальное значение block.
2) Попавшийся на одном Ajax-ориентированном сайте - прятать список за экран (top:-999em;), а потом устанавливать позицию при наведении.

Так как я взял CSS из второго варианта (почему станет ясно позже), то с первым предлагаю поэкспериментировать самостоятельно.

В принципе на этом можно было бы и закончить, если бы не всеми любимый Internet Explorer (будь он неладен), который плохо обрабатывает псевдо-класс :hover, поэтому переходим к следующему шагу.

Шаг 3. Немного java-script и jQuery

Как это не прискорбно, но java-script придётся применять в любом случае, но я имею вам предложить целых два варианта (ну на самом деле их, наверное, больше), а вы уж сами решайте каким воспользоваться. Объяснять как именно ЭТО работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.
Способ 1 - Чистый java-script

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav-one");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() { this.className+=" sfHover";}
node.onmouseout=function() {
            this.className=this.className.replace(" sfHover", "");
  }
}}}}
window.onload=startList;

Способ 2 - C применением jQuery

$(document).ready(function(){
 if (document.all) {$("#nav-two li").hoverClass("sfHover");});
$.fn.hoverClass = function(c) {
  return this.each(function(){
    $(this).hover(
      function() { $(this).addClass(c);  },
      function() { $(this).removeClass(c); }
    );
  });
};

Кому как, а мне визуально больше нравится второй вариант, к сожалению, тут есть одно “НО” - необходимость подключения библиотеки jQuery. Не скажу, что это огромный минус, потому что: а) она идёт в комплекте с WordPress, так что ничего дополнительно скачивать не придётся; б) возможно какой-то из установленных у вас плагинов уже ею пользуется. Сама библиотека весит 20-30кб, поэтому особо не обременит пользователя, к тому же грузится она только первый раз, а потом подгружается из кэша. И не стоит забывать, что она позволяет делать многие интересные вещи, о чём ниже, в пункте 4.

Сейчас я объясню как её подключить:
1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово “jQuery”.
2. Если его нет, то лезем в файл темы header.php и где-нибудь перед </head> вставьте
<script type=”text/javascript” src=”http://ваш_домен/wp-includes/js/jquery/jquery.js”></script>

Кстати, если кто не знает, то приведенные выше java-script листинги нужно тоже вставить в хэдер до </head>, обрамив с обоих сторон <script type=”text/javascript”>…</script>

Шаг 4. jQuery-бонус - плавное меню

Раз уж мы вынудили пользователя скачать лишних целых 25кб, то надо его за это как-то наградить:)
Как вы смотрите на то, чтобы сделать появление меню плавным? Думаете сложно? А как вам вот такой код?

$(document).ready(function(){
$("#nav-two li ul").fadeOut("fast");
$("#nav-two li").hover(
  function(){ $("ul", this).fadeIn("fast"); },
  function(){ $("ul", this).fadeOut("fast"); }
);});

Помоему просто отлично, а главное понятно) Добавлю лишь, что вместо “fast” можно добавить “slow” или любое число в миллисекундах.

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

Теперь думаю при помощи этой методики не составит труда делать различные меню - при помощи всяких там wp_list_categories и иже с ним.

ПыЦ: Только не спрашивайте меня, почему SuckerFish. Как я понимаю - это означает рыбу прилипалу или я ошибаюсь? Есть среди читателей знатоки ангельского языка?