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

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

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

1. Введение

В последнее время я не раз сталкивался с тем, что многие интересуются выпадающим меню в WordPress? Когда-то, только начиная изучать web-кодинг, я пытался сделать более или менее нормальное выпадающее меню - и проклял и java-script, и html, и, конечно же, все браузеры.

Но сейчас я снова заинтересовался этим вопросом, и обнаружил, что для создания отличного выпадающего меню достаточно знать:

а) как делать ненумерованные списки в html (<ul></ul>);

б) уметь копипастить файл стилей.

Этот мастер-класс написан для тех, у кого эти два пункта вызывают у сомнения: здесь будет предельно доступно изложено по шагам, как создать выпадающее меню. Нетерпеливые же могут сразу перейти сюда и посмотреть/пощупать своими руками, как это работает.

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 < navRoot.childNodes.length; 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 и перед </head> вставляем <script type="text/javascript" src="http://ваш_домен/wp-includes/js/jquery/jquery.js"></script>

Кстати, уточню, что приведенные выше java-script-листинги нужно тоже вставить в хэдер до </head> , обрамив с обеих сторон <script type="text/javascript">...</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
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
0
комментариев
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
Digital-marketing: как выжить в кризис. Опыт реальной компании
Maks
1
комментарий
0
читателей
Полный профиль
Maks - Спасибо за опыт Вашей компании, Иван Папусь. Интересно получилось! Желаю Вашему бизнесу стабильности и успешно пережить все кризисы))
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
0
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
36
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
Кейс Hansa: как увеличить органический трафик в 1,5 раза
Алексей Порфирьев
3
комментария
0
читателей
Полный профиль
Алексей Порфирьев - Спасибо за замечание, о данной проблеме известно, но она не стоит в порядке приоритетных. Вопрос, на самом деле, дискуссионный. В тематике конкуренция не настолько велика, а в топе выдачи часто встречаются сайты с более серьёзными техническими проблемами. По этому, именно в статьях, более важно работать над релевантностью контента, отношением времени пользователя на странице к уровню доскрола, и различным пользовательским функционалом (рейтинг материала, просмотры и т. п.).
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
380
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
112
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

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