×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 7555

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 при помощи javascript

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

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

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

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

    Сейчас я объясню, как подключить библиотеку jQuery:

    1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово "jQuery".

    2. Если его нет, то заходим в файл темы header.php и перед вставляем

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

    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

    (Голосов: 2, Рейтинг: 1)
    Читайте нас в Telegram - digital_bar

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


    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Как работать с сервисом для блогеров и бизнеса Perfluence
    SergZa
    1
    комментарий
    0
    читателей
    Полный профиль
    SergZa - Не знал, что с небольшим количеством подписчиков можно заработать, буду пробовать;)
    Диагностика и снятие ссылочного фильтра «Минусинск» в 2021 году. Кейс
    Stanislav Romanenko
    7
    комментариев
    0
    читателей
    Полный профиль
    Stanislav Romanenko - Просто чисткой ссылочного можно просадить позиции в гугле, поэтому с бухты-барахты начинать удалять ссылки как-то тоже не хотелось бы. Ну в общем, если попадётся ещё подобный случай - не стесняйтесь выкладывать новый кейс :) Просто видите как мало кейсов по этому поводу, поэтому каждый на вес золота. "с этой бедой также приходится сталкиваться и пока кроме как крутить в обратную сторону ничего лучше не придумали." - на серче один товарищ скрипт антибота своего под это дело заточил searchengines.guru/ru/forum/981615/page39#unread - вроде боты пропадают, но и часть живых людей тоже :)
    Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
    Данил Щеглов
    1
    комментарий
    0
    читателей
    Полный профиль
    Данил Щеглов - Сервис вообще отличный. Я обращался для рекламы к блогерам, которых я мог даже сам выбрать. Справляются быстро и качественно.
    Алгоритм продвижения сайта через Pinterest
    Сергей Демин
    9
    комментариев
    0
    читателей
    Полный профиль
    Сергей Демин - Работает я так понимаю для инфо запросов в гугле?
    Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
    Дмитрий Кулаевский
    1
    комментарий
    0
    читателей
    Полный профиль
    Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
    Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
    Андрей
    1
    комментарий
    0
    читателей
    Полный профиль
    Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
    Увеличение трафика новостного сайта в 2 раза с помощью SEO. Кейс
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Делали подобное тут ruszakony.ru/rubrikator/ , получилось полная фигня
    5 книг от эксперта: Александр Алаев (АлаичЪ и Ко)
    Сергей
    1
    комментарий
    0
    читателей
    Полный профиль
    Сергей - Богатый папа, бедный папа - сборник мифов, которые уже разоблачил все. Все сразу стало понятно про "эксперта". Дальше можно список не смотреть. Прочитать ее конечно можно, если ничего другого нет под рукой, но советовать другим, это уже извините, совсем людей не уважать.
    Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
    Павел Берсенев
    1
    комментарий
    0
    читателей
    Полный профиль
    Павел Берсенев - Мы тоже такое делали, только по СЧ. vc.ru/marketing/226855-ohrana-perimetra-alternativa-polucheniya-100500-poziciy-v-tope-poiskovoy-vydachi
    Локальное SEO, или Как увеличить трафик стоматологии на 700% в небольшом городе
    Дмитрий Дмитриев
    1
    комментарий
    0
    читателей
    Полный профиль
    Дмитрий Дмитриев - расскажите, о чем именно речь? :)
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    385
    Комментариев
    373
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    141
    Комментариев
    121
    Комментариев
    113
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    92
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    67
    Комментариев
    62
    Комментариев
    60
    Комментариев
    59

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