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

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

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

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

    internet-dlya-biznesa
    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Поделиться 
    Поделиться дискуссией:
    Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    23 действительно эффективных совета по продвижению интернет-магазина
    Гость - Троль Гуру паНгинации - Что такое паНгинация?))))
    Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2016»
    Марина
    1
    комментарий
    0
    читателей
    Полный профиль
    Марина - Ingate i-Media SEO.RU Netpeak 1PS.RU
    Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
    Михаил - Хватит пениться на каждый аргументированный отзыв. Это не придает вашей компании чести.
    Как создать интернет-магазин: сколько стоит открытие?
    Гость - да у битрикса что ни обновление - то сплошные баги. недавно знакомый обновился на лицензии интернет-магазина, про***лись заказы за последнюю неделю, слетели все связи по складам. одним словом, жопа. при этом обновился на сразу, а спустя месяц после выкатывания, надеялся, успеют все поправить
    Как упростить продвижение вечными ссылками?
    Coursh - Зарегестрировался. Накинули 1100 рубликов за пополнение на 10к. Очень неплохо!
    Вопрос недели: почему сайт хорошо ранжируется в Google и не интересует Яндекс?
    Nina S.Dzh. - У вас достаточно конкурентная тематика для рунета и по главной странице домена расположена англоязычная версия. Полагаю, в этих двух фактах вся проблема. Поскольку Яндекс в данном случае считает английскую версию сайта приоритетной, а среди ваших конкурентов в выдаче достаточно много хороших русскоязычных сайтов, то он и не ранжирует ваш сайт высоко. Грубо говоря, ему есть что предложить пользователю и без вашего сайта. На мой взгляд, в данном случае версии нужно разводить по разным доменам, русскую вешать на RU и продвигать там.
    Кому и зачем нужен маркетплейс от Яндекса
    Дарья Калинская
    0
    комментариев
    0
    читателей
    Полный профиль
    Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
    Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
    Андрей
    1
    комментарий
    0
    читателей
    Полный профиль
    Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
    ТОП-10 автоматизированных сервисов контекстной рекламы
    Жанна Рожкова
    154
    комментария
    0
    читателей
    Полный профиль
    Жанна Рожкова - Научитесь отличать рекламу от PR-активности. Если следовать вашей логике, на этом сайте (и на всех остальных информационных ресурсах в принципе) кроме рекламы ничего и нет. Так что насчет статьи от понимающего эксперта? Будем рады, если подготовите
    Экспериментальное SEO: «Дырявые носочки панды»
    Adrian - Испания и Португалия находятся в Европе и участвовали в чемпионате Европы. Одна из этих стран даже стала победителем. А Южная и Центральная Америка здесь при том, что там разговаривают на испанском и португальском языках. Сына, учите географию.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    285
    Комментариев
    262
    Комментариев
    200
    Комментариев
    171
    Комментариев
    154
    Комментариев
    137
    Комментариев
    123
    Комментариев
    97
    Комментариев
    97
    Комментариев
    93
    Комментариев
    80
    Комментариев
    70
    Комментариев
    67
    Комментариев
    60
    Комментариев
    55
    Комментариев
    52
    Комментариев
    49
    Комментариев
    45
    Комментариев
    44

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