сервис аналитики звонков и оптимизации
бизнес-процессов
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

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

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
    Как построить качественную ссылочную массу сайта
    Айрат Рахимзянов
    38
    комментариев
    0
    читателей
    Полный профиль
    Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
    Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
    Андрей Ольшевский - Очень неточная статистика, объясню почему. Довольно часто делаю анализ сайтов на качество и объём ссылочной массы. Всегда делаю выгрузку из трех источников – Вебмастера Яндекса, сервиса Мегаиндекс, сервиса Линкпад. Потом с помощи алгоритмов и функции Excel отсеиваются много дублей, битых ссылок, несуществующих урл и тп. Как показала практика, вебмастера Яндекса вполне достаточно, там вся информация и она самая актуальная, в других сервисах куча мусора, а нового, чтоб было найдено и проиндексировано ПС - очень мало. Поэтому мирятся количеством в данном анализе не профессионально.
    Как создать интернет-магазин: сколько стоит открытие?
    Пришел посмеяться
    1
    комментарий
    0
    читателей
    Полный профиль
    Пришел посмеяться - Я просто посмеюсь :D Даже не хочу ничего особо говорить :D Смех, а не статья.
    ТОП-10 автоматизированных сервисов контекстной рекламы
    Гость - Действительно, очень плохая статья. А у редактора Блондинки видимо слишком много свободного времени.
    Кому и зачем нужен маркетплейс от Яндекса
    Дарья Калинская
    212
    комментария
    0
    читателей
    Полный профиль
    Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
    Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
    Андрей
    1
    комментарий
    0
    читателей
    Полный профиль
    Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
    Инструкция по применению: обзор сервиса обратного звонка Callbackhunter
    Полина Ковальчук
    1
    комментарий
    0
    читателей
    Полный профиль
    Полина Ковальчук - Возможно, но не советую экономить на этом сервисе, функционал то тоже круче, чем у аналогов. Вы создаете сайт для получения денег и чем качественнее Вы выстроите продвижение, тем больше лидов Вы получите!
    Тест: Какой ты интернет-маркетолог?
    Петр - Мда уж, есть ряд очень и очень субъективных вопросов, например с картинками и ctr или с несколькими вариантами ответа, когда из 5 пунктов надо выбрать 4, что несерьезно. Поэтому, как минимум, к этому тесту нельзя относиться серьезно. Его надо очень серьезно дотягивать, а не вываливать отсебятину.
    Комплексный аудит от А до Я: анализируем интернет-магазин напольных покрытий и межкомнатных дверей
    Ivan Kutas
    1
    комментарий
    0
    читателей
    Полный профиль
    Ivan Kutas - Иногда сайты выгружают данные из GA в SimilarWeb. В Казахстане некоторые крупные новостники регулярно это делают.
    SEO-тренды на 2017 год: мнение специалистов
    Olga Inventor
    1
    комментарий
    0
    читателей
    Полный профиль
    Olga Inventor - Хорошая статья. То, что SEO - антитренд, уже давно говорят. Нужен комплексный подход.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    285
    Комментариев
    262
    Комментариев
    212
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    123
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    71
    Комментариев
    67
    Комментариев
    60
    Комментариев
    55
    Комментариев
    52
    Комментариев
    50
    Комментариев
    45
    Комментариев
    44

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