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

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

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

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
    Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
    Тимур
    6
    комментариев
    0
    читателей
    Полный профиль
    Тимур - Понял, спасибо за информацию.
    3 основные ошибки, которые допускают владельцы сайтов при продвижении
    Виктор Гаврюков
    31
    комментарий
    1
    читатель
    Полный профиль
    Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
    Зарабатываем с помощью текстов: как создать уникальный контент и монетизировать сайт
    Максим Зубарев
    1
    комментарий
    0
    читателей
    Полный профиль
    Максим Зубарев - Просто каждый должен заниматься своим делом и о нем и писать ))) сапа хороша в ссылках, вот о линкбилдинге их материалы заходят хорошо. Сапа не пишет статьи ))) Поэтому ничего удивительного
    Тильда для SEO-продвижения и бизнеса: плюсы и минусы конструктора сайтов
    Сергей Садовничий
    2
    комментария
    0
    читателей
    Полный профиль
    Сергей Садовничий - Есть страницы где 79 для мобайла / 97 для десктопа без вообще каких либо заморочек. Есть страницы на Тильда у которых показатели для мобайла 60 - и эти страницы находятся в ТОП 1-3 по всем интересующим ключам. С показателями по скорости 60 Google Search Console заявляет, что страница оптимизирована для мобильных устройств и является удобной для пользователей. Рекомендую в первую очередь делать акцент на контенте, качестве внутренней оптимизации, наличии коммерческих факторов (если это не инфо страница) и над ссылочным а уж потом пытаться подтягивать показатели по PageSpeed Insights. Но как правило страницы выходят в ТОП и необходимости добиться PageSpeed Insights за 80 нет!
    Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
    Рустам
    1
    комментарий
    0
    читателей
    Полный профиль
    Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
    Скучное, но эффективное SEO: 3 кита успешной поисковой оптимизации
    Bquadro
    2
    комментария
    0
    читателей
    Полный профиль
    Bquadro - Не совсем так) Совет про техническую оптимизацию и структуру сайта равноценен как для коммерческого сайта, так и для информационного. Эти два правила универсальны и влияют на ранжирование в поиске вне зависимости от типа ресурса.
    Как оптимизировать картинки для SEO-продвижения: чек-лист
    Алексей Махметхажиев
    6
    комментариев
    0
    читателей
    Полный профиль
    Алексей Махметхажиев - Надо упомянуть про ленивую загрузку lazy load, что её можно сделать с вредом для картинок и их индексации и можно сделать всё правильно. Есть отложка вредная.)
    Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
    Дмитрий
    3
    комментария
    0
    читателей
    Полный профиль
    Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
    Известность бренда SEO-компаний 2021
    Mike
    9
    комментариев
    0
    читателей
    Полный профиль
    Mike - я конкретного человека спросил. ваша реклама не особо интересует. тем более вы даже не удосужились дать примеры статей
    Рост ботных переходов на сайт: как интерпретировать и что делать
    Mike
    9
    комментариев
    0
    читателей
    Полный профиль
    Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    385
    Комментариев
    373
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    141
    Комментариев
    121
    Комментариев
    115
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    94
    Комментариев
    80
    Комментариев
    77
    Комментариев
    74
    Комментариев
    67
    Комментариев
    62
    Комментариев
    60
    Комментариев
    59

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