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

Россия+7 (495) 960-65-87
Шрифт:
0 4565

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

    Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Отправить отзыв
      ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
      SEOnews и Serpstat запускают конкурс для интернет-маркетологов
      Marina Lagutina
      1
      комментарий
      0
      читателей
      Полный профиль
      Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
      «Я оптимизировал сайт, а он не в ТОП! Что делать?»
      Павел Горбунов
      7
      комментариев
      0
      читателей
      Полный профиль
      Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
      Монетизация сайта. Как, когда, сколько?
      Гость2
      1
      комментарий
      0
      читателей
      Полный профиль
      Гость2 - Руслан! Спасибо за ваш сервис и за данную статью в частности! С апреля являюсь вашим пользователем - очень доволен как сервисом, так и уровнем заработка! Еще раз спасибо, удачи вашему проекту!
      Мир глазами поисковых систем
      Александр Рунов
      7
      комментариев
      0
      читателей
      Полный профиль
      Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
      Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
      Екатерина Иванова
      1
      комментарий
      0
      читателей
      Полный профиль
      Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
      7 причин не работать на биржах копирайтинга
      Dasha Shkaruba
      6
      комментариев
      0
      читателей
      Полный профиль
      Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
      День рождения SEOnews: 12 лет в эфире!
      Анна Макарова
      308
      комментариев
      0
      читателей
      Полный профиль
      Анна Макарова - Ура )
      Google.ru внесли в реестр запрещенных сайтов
      Гость
      1
      комментарий
      0
      читателей
      Полный профиль
      Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
      Инфографика: самые распространенные SEO-ошибки Рунета
      Alex Wise
      3
      комментария
      0
      читателей
      Полный профиль
      Alex Wise - Спасибо, Женя, за рекомендацию! :) Андрей, чтобы понять, какой программой пользоваться, нужно сделать несколько вещей: 1. Попробовать обе: у нас в Netpeak Spider бесплатный триал на 14 дней с полным функционало; у SFSS до 500 URL всегда бесплатно, но с ограниченным функционалом. 2. Понять свой стиль работы – если вы любите полный контроль и из-за этого более высокую скорость пробивки, тогда выбирайте Netpeak Spider. Если для вас не так важна скорость и количество пробитых URL, то можно остановиться на SFSS. 3. Определиться с нужными функциями: их в обоих программах очень много и как в Netpeak Spider есть уникальные, так и в SFSS есть свои уникальные. Мы всегда ориентируемся на то, чтобы быстро и чётко показать ошибки – для этого у нас вся таблица красится в соответствующие цвета. Думайте!) И, если что, обращайтесь с вопросами – мы будем рады помочь!)
      Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
      Оля
      1
      комментарий
      0
      читателей
      Полный профиль
      Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
      ТОП КОММЕНТАТОРОВ
      Комментариев
      910
      Комментариев
      834
      Комментариев
      554
      Комментариев
      540
      Комментариев
      483
      Комментариев
      373
      Комментариев
      308
      Комментариев
      262
      Комментариев
      224
      Комментариев
      171
      Комментариев
      156
      Комментариев
      137
      Комментариев
      121
      Комментариев
      97
      Комментариев
      97
      Комментариев
      95
      Комментариев
      80
      Комментариев
      77
      Комментариев
      67
      Комментариев
      60
      Комментариев
      59
      Комментариев
      55
      Комментариев
      53
      Комментариев
      52
      Комментариев
      46

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