Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
15 Января 2008 в 01:16

Выпадающее меню в WordPress

0 5492

1. Введение
2. Шаг 1. Готовим список пунктов меню руками
3. Шаг 2. Стилизуем списки
4. Шаг 3. Оптимизируем под IE при помощи java-script
5. Шаг 4. jQuery-бонус - плавное меню
6. Заключение

1. Введение

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

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

а) как делать ненумерованные списки в html (

    );
    б) уметь копипастить файл стилей.

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

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

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

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

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

    //Внешний список


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

    3. Шаг 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;), а потом устанавливать позицию при наведении.

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

    4. Шаг 3. Оптимизируем под IE при помощи java-script

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

    Объяснять, как именно это работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.

    Способ 1 - Чистый java-script


    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav-one");
    for (i=0; inode = 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.

    Сейчас я объясню, как подключить библиотеку jQuery:
    1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово "jQuery".
    2. Если его нет, то заходим в файл темы header.php и перед < /head> вставляем

    Кстати, уточню, что приведенные выше java-script-листинги нужно тоже вставить в хэдер до < /head> , обрамив с обеих сторон

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

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

    $(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" или любое число в миллисекундах.

    6. Заключение

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

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

    Андрей Тарашевский aka Тарас - Блог о Wordpress

    0 комментариев
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.

      Отправьте отзыв!