Как сделать выпадающее меню в WordPress. Делаем выпадающее меню в WordPress с плагином и без него

И снова Здравствуйте! С Вами как обычно Владимир и тема сегодняшнего дня будет такая — как сделать выпадающее меню на WordPress сайте или блоге... Погодка сегодня ппц, -27 мороза! Уххх! Даже выходить на улицу не хочется =(А завтра уже -7 обещают… Ни чего себе колебания погоды, к чему бы это интересно?!

В общем раз такое дело, решил провести время с пользой и со своей кошкой «Боней», написать для Вас полезную статью! Читаем, внедряем, комментируем =)

Меню на Вордпресс, начиная с третей версии движка, имеет очень гибкие настройки. Это позволяет пользователям настроить меню WordPress так, как им необходимо, с любыми их капризами. Вот и мы с Вами покапризничаем сейчас и дадим себе трудное задание по созданию верхнего меню для нашего сайта. А потом с легкостью его выполним.

Итак, задание:

• Я хочу создать такое меню, пунктами которого можно сделать как и страницу, так и любую запись из блога. Возможно, еще чтоб этот пункт выводил все записи из выбранной мной рубрики или все записи, которым дана определенная метка (тег).
• А может даже я захочу сделать пунктом меню любую ссылку, какую захочу.
• Еще я хочу сделать несколько пунктов меню в виде выпадающего списка на WordPress, в котором содержатся подпункты. Причем эти подпункты может мне даже захочется сделать и в одном из подпунктов.
• Короче, хочу выпадающее меню двух- , трех- или даже четырехуровневое.
• Та-а-ак, что еще придумать? А! Хочу, чтоб при наведении на любой из пунктов, всплывало какое-то пояснение к нему. И еще, чтоб некоторые из пунктов меню открывались в отдельном окне браузера.

Вроде все! А не много ли я хочу? =)

Как Вы, наверное, поняли настройка меню включает в себя все перечисленные мной «капризы». Причем, как я говорил выше, все эти капризы с легкостью можно реализовать в админпанели WordPress.

Итак, если Вы готовы, то давайте приступим к делу.

Делаем выпадающее меню на WordPress

Чтобы перейти к созданию меню WordPress нужно в админпанели перейти по вкладке «Внешний вид» -> «Меню».

Обращаю Ваше внимание на то, что эта возможность появилась у WordPress, начиная с 3-ей версии. Если у Вас более ранняя версия, то обязательно обновитесь.

Теперь найдите в верхнем правом углу окна вот такой выплывающий чекбокс:

Жмите, «Настройки экрана» и поставьте галочки так, как у меня.

Это необходимо для того, чтобы на странице отобразились соответственные возможности, которые нам нужны для исполнения моих капризов.

Создаем выпадающее меню на WordPress

В поле для ввода имени меню, пишем любое название. Я назвал - « верхнее_горизонтальное_меню ».

Жмем справа кнопку «Создать меню». Теперь у нас стала активна левая колонка, которая отображает несколько блоков, позволяющие нам добавить пункты в наше меню.

Вкладка «Управление областями». Здесь нам говорят, сколько меню поддерживает наша тема. В моем случае - 1 меню. В выпадающем списке нужно выбрать название того меню, которое мы будем использовать. Мы ранее создали меню с названием «Верхнее меню». Выбираем его и жмем «Сохранить».

Давайте теперь разберем каждый блок:

• Первый блок «Страницы» — позволяет нам добавить в пункт меню страницы которые уже существуют на Вашем сайте.
• Второй блок «Ссылки» — позволяет нам добавить в пункт меню любую ссылку. Например, я хочу в меню сделать пункт, который будет вести на мой блог. В поле «URL» я пишу адрес своего блога, а в поле «Текст» - название пункта. Жмем кнопку «Добавить в меню».
• Третий блок «Рубрики» — позволяет в пункт меню добавить любую рубрику Вашего сайта. Опять же ставьте галочку напротив нужной рубрики и жмите «Добавить в меню».
• Четвертый блок «Записи» — можно добавить ссылку на любую статью которую Вы хотите видеть в меню WordPress и нажмите «Добавить в меню». Эта возможность может Вам пригодится тогда, когда Вы хотите обратить внимание Ваших посетителей на какой-то важный или полезный пост.

Теперь давайте посмотрим в правую колонку. Здесь видны те пункты, которые мы добавили. Чтобы немного отредактировать каждый из пунктов, нужно нажать на маленький треугольник справа. У нас раскроются дополнительные возможности настройки для пункта меню.

В поле «Атрибут title» впишите какое-то пояснение к пункту. Это пояснение будет всплывать при наведении на пункт меню курсора мыши. Если Вы хотите, чтоб этот пункт открывался в новом окне браузера, поставьте галочку напротив «Открыть ссылку в новом окне/вкладке».

Таким же образом настройте и все остальные пункты меню. Когда все будет готово, нажмите кнопочку «Сохранить меню». Все, можете обновлять Ваш сайт и смотреть результат.

Теперь давайте вспомним все мои капризы про выпадающее меню на WordPress и посмотрим, что мы еще можем сделать...

• Во-первых, мы можем все наши пункты простым перетягиванием левой кнопкой мыши расположить в удобном для нас порядке.
• Во-вторых, мы имеем возможность сделать выпадающие подпункты для любого пункта просто передвинув дочерний подпункт немного правее.

Таким образом пункт, который находится выше будет родительским, а тот, который ниже и сдвинутый правее, будет дочерним. Нажмите «Сохранить меню» и посмотрите, как это выглядит на сайте.

Так мы можем строить многоуровневые выпадающее меню WordPress. Смотрите видео!

2 голоса

Как вы передвигаетесь на автомобиле в незнакомом городе? Ориентируетесь по направляющим знакам, чтобы доехать до пункта назначения. Они расставлены в нужных местах, указывают, куда повернуть и какое расстояние проехать. Ситуация с навигацией на сайте обстоит аналогичным образом.

Необходимо показать подробный путь посетителю до той страницы, которая ему требуется. С вами Андрей Зенков, автор блога Start Luck. Сегодня мы поговорим, как сделать выпадающее меню в .

Чтобы повысить собственную продуктивность, нужно знать о выражении Ларри Пейджа (сооснователь Google): «Всегда делайте больше, чем от вас ожидают». Тут всё просто: если от вас ждут одного сделанного сайта, сделайте два. Если от вас ждут 5 продаж, сделайте 10. Следуя этому правилу, можно добиться невероятных высот!

Почему я рассматриваю вариант с выпадающей навигацией? С помощью такой можно указывать разделы и подразделы в неограниченном количестве. Простенький пример многоуровневого меню:

• Главная страница
• Автозапчасти

1. ВАЗ
1.1 2112
1.1.1 Двигатель
1.1.1.1 Прокладки для клапанов

Допустим, человеку нужны прокладки для клапанов на свой автомобиль - ВАЗ 2112. Благодаря вышеуказанному образцу он моментально находит то, что ему требуется, проходя путь от главной страницы. Ваша задача, уважаемые читатели, на первом этапе разработать хорошую , а затем реализовать её в техническом плане, то есть сделать навигацию. Как это сделать, я вам расскажу прямо сейчас.

Плагины навигации для WordPress

Что же такое в нашем случае? Это то, в чём уже содержится готовое решение, то есть наша менюшка. От вас потребуется лишь внести простые настройки внешнего вида и наслаждаться полученным результатом. Это то же самое, что использоваться математические формулы. Даётся каркас с переменными, вы просто указываете свои значения и получаете результат, который является решением задачи.

Нельзя забывать о том, что мы сейчас живём в эпоху мобильного трафика. Огромное количество людей заходят на сайты через свои смартфоны и планшеты. Поэтому важно ресурса под таких пользователей. Я расскажу о нескольких плагинах, которые адаптированы под мобильные устройства.

JQuery Vertical Mega Menu Widget

Это самый простой вариант, с помощью которого можно быстро сделать боковое вертикальное меню. Распространяется на бесплатной основе.

Главная особенность - множество параметров внешнего вида. Вы сможете настроить по собственным вкусам анимацию появления выпадающих подразделов, перехода между разделами и многое другое. На выходе получается интересный вариант в стиле accordion (такая навигация, когда один блок с подразделами автоматически закрывается при наведении курсора на другой блок, сравнение идёт от растяжки мехов гармошки).

Покопавшись в настройках, можно прийти к оптимальному результату, который вписывается в общее оформление вашего проекта. Чтобы вам было проще разобраться во всех конфигурациях, я нашёл хорошее видео:

Единственный минус - маленькое количество готовых скинов. Вам доступно несколько тем с разной расцветкой. Чтобы меню отображалось посетителям, не забудьте его активировать в разделе «Внешний вид» и установить в нужной части сайта.

Admin Menus Fixed

Ещё одно простое решение, похожее на предыдущий вариант, с помощью которого можно создать симпатичную навигацию за 10-15 минут. Этот плагин нравится мне возможностью делать не только вертикальное меню, но и горизонтальное.

Работает на WordPress 3.5+. Устанавливается в любые . Для настройки не понадобится разбираться со сложными кодами. Все конфигурации расположены в удобной таблице. Найти Admin Menus Fixed можно в разделе «Плагины» в панели управления вашего проекта.

JQuery Mega Menu Widget

Одна из самых любимых моих разработок. Если вам нужна МЕГА навигация с красивым оформлением, то это именно то, что вы ищите. Горизонтальное, вертикальное, фиксированное - любое меню, какое вы только пожелаете.

Тут у нас появилось новое понятие - меню с фиксацией. Это удобный вариант для контентных проектов с большими статьями. Изначально оно располагается в привычном месте, но как только пользователь начинает листать страницу вниз, менюшка фиксируется в самом верху окна. Какие преимущества? Человеку, дочитавшему статью, не потребуется листать вверх до начала страницы, ведь меню уже здесь, рядом с ним! Пример — Смотреть .

Этот плагин обладает множеством настроек внешнего вида и анимаций. Внимательно изучив их, вы сможете создать красивую навигацию с разнообразными эффектами. Доступно шесть скинов, для которых можно выбрать одну из шестнадцати цветовых палитр. Блоки можно снабдить различными иконами.

Набор JQuery Mega Menu Widget включает в себя более 430 картинок. Функционал позволяет создать меню для размещения в футере. Такую возможность трудно найти в существующих плагинах. Обзор всех возможностей можете посмотреть в коротком видео:

UberMenu

Готовое решение для творческих личностей. Включает в себя огромное количество стилевых решений, возможность добавление иконок, многочисленные настройки анимаций и многое другое. С настройками можно просидеть несколько часов не потому, что они трудные (всё наоборот, они очень простые), а потому, что здесь открывается большой простор для воображения.

С UberMenu можно настроить внешний вид многоуровневой навигации под свой шаблон. Благодаря интуитивно понятному интерфейсу вы быстро разберётесь со всеми конфигурациями.

Nextendweb Menu

Плагин очень похож на предыдущий вариант. В распоряжении пользователя - пять готовых скинов, которые можно настроить под свои нужды. Присутствует поддержка иконок, существует возможность настройки анимации и многое другое. Опять же, интерфейс сделан так, чтобы любой начинающий пользователь разобрался в параметрах. Поэтому с конфигурациями у вас проблем не возникнет. Демонстрационные варианты можете посмотреть на странице — nextendweb.com .

Какие можно сделать выводы?

Что же мы имеем по факту? Наша любимая WordPress, как и всегда, предлагает нам массу готовых решений, которые избавляют нас от рутинной работы. На разработку уникального меню при помощи кода может уйти несколько дней (это не считая долгих месяцев, потраченных на изучение основных программных языков). Вам же нужно просто создать структуру, выбрать внешний вид и настроить анимации.

Если же вас интересует изучение программных языков, можете ознакомиться с курсом Михаила Русакова по последним версиям HTML и CSS . После прохождения всех уроков, вы сможете создавать не только простенькие горизонтальные менюшки, но и другие элементы, а также небольшие сайты.

Не забывайте, что от хорошей навигации во многом зависит успешность проекта. Например, в случае интернет-магазина качество структуры и меню влияет на конверсию и конечную прибыль. В контентом проекте влияет на поведенческие факторы.

После моего сегодняшнего рассказа вы сможете сделать собственное красивое меню за 10-15 минут. А на этом мой рассказ заканчивается. Не забудьте подписаться на мой блог, чтобы быть в курсе новых публикаций.

С вами был Андрей Зенков, увидимся уже совсем скоро!

С помощью инструментов WordPress можно сделать очень хорошую навигацию по своему сайту. Одним из элементов навигации по сайту WP является специально созданные меню сайта. Меню WordPress можно создавать как внутренними инструментами администрирования WP, так и при помощи плагинов.

Создать меню WordPress при помощи встроенных инструментов администрированияНемного о принципах организации и структуре меню WordPress

Основной код WordPress позволяет создавать меню из трех составляющих: Произвольные ссылки, Рубрики сайта и Страницы сайта.

• Произвольные ссылки это возможность вставить в меню пункт — ссылку на любую стороннюю страницу Интернет или внутреннюю страницу сайта. Таким образом можно вставить в меню главную страницу сайта, указав в поле URL адрес главной страницы сайта.
• Рубрики и страницы сайта выбираются для меню из списка реально существующих на сайте рубрик и страниц. Черновики рубрик и страниц в этот список не попадают.

Количество меню, которые можно сделать ограничивается только здравым смыслом. При большом количестве неиспользуемых меню, возможны проблемы с загрузкой этой страницы административной панели. Кроме этого, делать запасные меню особого смысла нет, так как в шаблоне ограничены выделенные места для их размещения. Каждый шаблон сверстан с определенным количеством выделенных мест для размещения меню. Обычно это одно или две .

На странице настроек «Меню», места для размещения меню шаблона нужно выбрать в левой верхней части страницы, заголовок «Область темы».

На странице «Меню» есть две кнопки: Редактировать меню и Управление областями. Изменение внешнего вида страницы не коим образом не меняет ее функциональность. Меню «собирается» по прежним принципам: пункты меню выбираются из внешних ссылок, страниц и рубрик.

Для примера создадим меню WordPress из главной страницы сайта и разветвленного меню рубрик и страниц сайта.

Создать меню WordPress с произвольной ссылкой

Скриншоты для версии ниже WP 3.8.

Чтобы создать меню WordPress, дадим ему именя. В правой верхней части окна вписываем «Заголовок меню» и нажимаем «Сохранить меню». Меню создано, теперь нужно наполнить его нужными пунктами.

Примечание: Можно создать любое количество меню WordPress, однако разместить их на сайте можно только в специально отведенных в шаблоне местах.

В WordPress в качестве главной страницы можно выбрать:

• любую статическую страницу сайта;
• или последние публикуемые статьи в виде блога.

В этом примере, в качестве главной страницы выберем страницу, открывающаяся по основному домену сайта. Для создания пункта меню «Главная страница» в части «Произвольные ссылки» вписываем URL сайта. В пункте «Текст» вписываем название, например «Главная». Нажимаем «Добавить в меню».

После добавления в меню появляется новый пункт с названием «Главная».

Интересен пункт произвольно. При нажатии на «Произвольно» появится форма в которой

• можно редактировать этот пункт, дополнить его атрибутами title (эта запись будет появляться при наведении мыши на пункт меню);
• сохранить изменения в пункте меню;
• удалить этот пункт меню;
• и что очень полезно, можно поменять его название.

В примере, изменять ничего не нужно, поэтому сохраняем меню с добавленным пунктом «Главная страница».

Меню создано остается поместить его на сайте. Это можно сделать в части «Область темы». Из выпадающих меню Navigation (это могут быть Main и Top Navigation) выбираем созданное меню «Главная» и нажимаем сохранить.

создать меню WordPress готово

Меню создано и размещено на сайте Worpress.

Примечание. Таким же образом можно создать и наполнить любое меню нужными пунктами с произвольными ссылками на любые посты сайта по их URL адресам.

Создадим еще одно меню с рубриками и страницами сайта

Создаем меню с названием «Рубрики». Для этого сначала создадим меню дав ему имя. Нажимаем знак плюс [+] , вписываем произвольное название меню в появившейся форме и нажимаем «Создать меню». Меню под новым названием создается и сохраняется. Остается собрать его,то есть наполнить нужными пунктами.

В окнах «Страницы» и «Рубрики» выбираем нужные рубрики и/или страницы для добавления в меню. Для добавления нажимаем кнопку «Добавить в меню».

В центральной части страницы настроек «Структура меню», отражаются все выбранные пункты меню, которые можно выстроить в нужную вам структуру. Здесь можно менять порядковое расположение пунктов простым перетаскиванием левой кнопкой мыши. Также можно создать родительские и дочерние пункты.

Не забывайте «Сохранять меню». Как видите создать меню WordPress не сложно. Однако, в нешний вид меню, созданных при помощи внутреннего администрирования WordPress, полностью определяется дизайном шаблона сайта. Иногда это не самый привлекательный вид. Для создания меню индивидуального дизайна, в том числе с эффектом выпадения подпунктов можно использовать неплохой плагин Dropdown Menu widget.

Оригинальное выпадающее меню WordPress плагином Dropdown Menu widget

Перед установкой плагина обратите внимание на его тестирование на вашей версии WordPress.

Для начала устанавливаем плагин на свой сайт. Сделать это можно плагинов, в том числе скачать плагин с официальной страницы плагина на WordPress.org (//wordpress.org/extend/plugins/dropdown-menu-widget/ ) и «залить» его в папку wp-content/plugins.

После активации плагина в меню «Параметры» появляется новый пункт «Dropdown Menu». Двумя кликами открываем его для настройки.

Основные настройки плагина делаем по своему усмотрению. Остановлюсь на нескольких из них.

В пункте «Темы» выбираем одну из 10 тем нового меню.

В пункте «Эффекты» ставим галочку «Использовать эффект выпадения»;

В пункте «Template Tag» (Шаблон тегов) выбираем из выпадающего списка, меню, которое нужно отображать. Здесь же копируем код, который нужно вставить в шаблон своего сайта, чтобы появилось новое меню на сайте.

Вставляем код меню Dropdown Menu в шаблон сайта

Чтобы вставить код(ниже) меню в шаблон, открываем в консоли Внешний вид >>> Редактор.

Вставляем код в любое нужное место шаблона, например, в файл шаблона header.php. Я выбрал место перед меню шаблона, созданного внутренними инструментами администрирования. Не забываем сохранятся.

Перед проверкой нового меню нужно удалить старое меню. Если созданное меню имеет пункты и подпункты, то подпункты будут выпадать.

После установки плагина Dropdown Menu widget в списках виджетов появляется новый виджет Dropdown Menu.С его помощью также можно сделать выпадающее меню в боковой части сайта.

На этом про то, как создать простое и выпадающее меню WordPress все!

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

Итак, если у вас в проекте имеется сложная структура меню со множеством подразделов и страниц в них, то в целях экономии места вполне можно использовать раскрывающийся эффект. Рассмотрим его реализацию для WP с помощью CSS и JavaScript.

Нашел для вас два варианта, хотя, думаю, в сети «подобного добра» гораздо больше. Первый — целиком и полностью связан с WordPress, второй — общая статья про вертикальное раскрывающееся меню на CSS. Главное здесь понять логику и дальше сможете легко их внедрять самостоятельно. Кстати, для сложной горизонтальной навигации советую со множеством настроек и классных фишек.

Шаг1. Создание меню в админке W ordpress

Об этом я процесс предельно прост. Логинитесь в систему и заходите в раздел «Внешний вид» — «Меню». Там добавляете раздел с подпунктами, где для родительского элемента указываете:

• Символ » # » в поле URL (для )
• Название раздела в поле Текст ссылки.
• Класс dropdown в поле Классы CSS.

Если у вас на странице не отображается последний пункт, то в самом ее верху есть закладка «Настройки экрана» (Screen Options). В открывающейся форме при клике нужно будет поставить галочку возле надписи «Классы CSS».

После создания / внесения изменений жмете «Сохранить меню». Выводить его на сайте вы можете с помощью или виджета «Произвольное меню».

Шаг2. Скрытие подразделов с помощью CSS.

Теперь нужно визуально скрыть подпукнты раздела. Для этого заходим во «Внешний вид» — «Редактор» и выбираем файл стилей вашей темы style.css (или другой). Добавляем код:

.menu .dropdown .sub-menu { display : none ; }

Menu .dropdown .sub-menu { display: none; }

Можно его также разместить через настройки темы, если у вас профессиональный шаблон с поддержкой пользовательских стилей (как правило, опция называется Custom CSS в общих настройках темы).

Шаг3. Javascript для раскрывающиеся меню в WordPress

Для продвинутых тем можно использовать настройку Custom Javascript, а в общем случае идем в раздел «Внешний вид» — «Редактор», где открываем файл шапки header.php. Добавляем скритп перед закрывающимся тегом .

< script type= "text/javascript" > jQuery(document) .ready (function () { jQuery(".menu .dropdown a" ) .click (function (e) { e.preventDefault () ; if (jQuery(this ) .parent () .children (".sub-menu:first" ) .is (":visible" ) ) { jQuery(this ) .parent () .children (".sub-menu:first" ) .hide () ; } else { jQuery(this ) .parent () .children (".sub-menu:first" ) .show () ; } } ) ; } ) ;

jQuery(document).ready(function(){ jQuery(".menu .dropdown a").click(function(e){ e.preventDefault(); if (jQuery(this).parent().children(".sub-menu:first").is(":visible")) { jQuery(this).parent().children(".sub-menu:first").hide(); } else { jQuery(this).parent().children(".sub-menu:first").show(); } }); });

Сохраняем и проверяем работает ли созданное вами раскрывающееся вертикальное меню на вордпресс сайте. Если ничего не происходит, попробуйте еще раз внимательно пошагово выполнить все действия — я код тестировал, все ок. Если не будет работать переход по ссылкам, попробуйте заменить строку:

jQuery(".menu .dropdown a" ) .click (function (e) {

jQuery(".menu .dropdown a").click(function(e){

jQuery(".menu .dropdown > a" ) .click (function (e) {

jQuery(".menu .dropdown > a").click(function(e){

Как и обещал выше, привожу еще один вариант как сделать раскрывающееся вертикальное меню. Оно немного другое по принципу и реализации, плюс здесь будет общий пример на HTML, не связанный конкретно с WordPress. Вы можете применить его для любого сайта. Начинающим разработчикам должно пригодится. Описание метода на английском можете . Вот как выглядит данное меню.

Простой HTML код для его внедрения:

My Account Dashboard Profile Settings Send Feedback

My Account

• Dashboard
• Profile
• Settings
• Send Feedback

При этом используются следующие CSS стили:

.dropdown { color : #555 ; margin : 3px -22px 0 0 ; width : 143px ; position : relative ; height : 17px ; text-align : left ; } .submenu { background : #fff ; position : absolute ; top : -12px ; left : -20px ; z-index : 100 ; width : 135px ; display : none ; margin-left : 10px ; padding : 40px 0 5px ; border-radius : 6px ; box-shadow : 0 2px 8px rgba (0 , 0 , 0 , 0.45 ) ; } .dropdown li a { color : #555555 ; display : block ; font-family : arial; font-weight : bold ; padding : 6px 15px ; cursor : pointer ; text-decoration : none ; } .dropdown li a: hover { background : #155FB0 ; color : #FFFFFF ; text-decoration : none ; } a.account { font-size : 11px ; line-height : 16px ; color : #555 ; position : absolute ; z-index : 110 ; display : block ; padding : 11px 0 0 20px ; height : 28px ; width : 121px ; margin : -11px 0 0 -10px ; text-decoration : none ; background : url (icons/arrow.png ) 116px 17px no-repeat ; cursor : pointer ; } .root { list-style : none ; margin : 0px ; padding : 0px ; font-size : 11px ; padding : 11px 0 0 0px ; border-top : 1px solid #dedede ; }

Dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dropdown li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; }

Учтите, что пути к картинкам-стрелочкам (icons/arrow.png) могут быть другие + не забудьте сами изображения. В целом оформление раскрывающегося вертикального меню можно представить в виде следующей схемы (для тех, кто не особо хорошо разбирается в отступах).

JavaScript

В JavaScript коде функция $(«.account»).click(function(){} использует класс «account» родительского элемента My Account. С помощью $(this).attr(‘id’) уточняется значение атрибута id, после чего применяется условный оператор для показа подменю.submenu. При этом также меняется значение $(this).attr(‘id’, ‘1’).

< script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js " >; < script type= "text/javascript" > $(document) .ready (function () { $(".account" ) .click (function () { var X= $(this ) .attr ("id" ) ; if (X== 1 ) { $(".submenu" ) .hide () ; $(this ) .attr ("id" , "0" ) ; } else { $(".submenu" ) .show () ; $(this ) .attr ("id" , "1" ) ; } } ) ; //Mouse click on sub menu $(".submenu" ) .mouseup (function () { return false } ) ; //Mouse click on my account link $(".account" ) .mouseup (function () { return false } ) ; //Document Click $(document) .mouseup (function () { $(".submenu" ) .hide () ; $(".account" ) .attr ("id" , "" ) ; } ) ; } ) ;

; $(document).ready(function() { $(".account").click(function() { var X=$(this).attr("id"); if(X==1) { $(".submenu").hide(); $(this).attr("id", "0"); } else { $(".submenu").show(); $(this).attr("id", "1"); } }); //Mouse click on sub menu $(".submenu").mouseup(function() { return false }); //Mouse click on my account link $(".account").mouseup(function() { return false }); //Document Click $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr("id", ""); }); });

При клике на странице с помощью $(document).mouseup(function() данное вертикальное раскрывающееся меню на CSS будет скрыто.

Для WordPress вам, конечно, больше пригодится первый вариант. Он максимально прост в реализации и использовании (даже рядовой юзер сможет добавлять новые разделы в данное меню).

Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в своем wordpress-блоге, и как назначить ему различные стили и визульные эффекты.

Начнем с самого простого, как создать выпадающее меню в WordPress. Думаю большинству пользователей это известно, но все же в двух словах объясню. Выпадающее меню — это меню в котором находятся подчиненные страницы, поэтому для того чтобы его создать, вам, в своем блоге нужно создать как минимум одну родительскую страницу, и одну дочернюю.

Чтобы не продолжать беспредметный разговор, давайте представим, что у нас в блоге есть обычная статическая страница под названием «О блоге», вот для нее мы и создадим три подчиненные страницы: «об авторе», «контакты», «партнерам».

Итак, поочередно, самым обычным способом добавим все три страницы, за исключением того, что в поле родительская страница следует выбрать «О блоге».

После этих, допольно простых действий, вы увидете выпадающее меню у себя в блоге, а вот как оно будет выглядеть, зависит от темы, которую вы используете. Если это одна из тем, идущих в комплекте с WordPress, то ваше меню отобразится в сайдбаре, в виде маркированного списка.

Если используете стороннюю тему, тут все зависит от совести разработчика. Мне часто попадались очень красивые темы, в которых совершенно не было предусмотрено выпадающее меню, вследствии чего после его добавления, шаблон разваливался на части.

1. Первое, что мы сделаем, это расположим меню сразу после шапки, а для этого сначала нужно удалить его из сайдабара. Открываем файл sidebar.php, находим в нем строчку

и удаляем ее

2. Теперь расположим меню ниже заголовка, для этого открываем файл header.php, и после блока «headerimg», вставляем следующие строки:

Здесь параметр title_li=, с пустым значением, означает что меню выведется без предваряющей надписи «Стараницы».

3. Теперь добавим стилей для нашего меню, чтобы оно выглядело соответственно общему дизайну темы, в файле style.css:

/*общий стиль блока меню*/ #menu{ height: 30px; background: #4182b8; margin: 5px 20px 100px 20px; clear: both; font-size: 14px; } /*стиль ссылок в меню*/ #menu li a{ color: #fff; display: block; line-height: 27px; padding: 0 10px; } #menu li a:hover{ background: #07599d; text-decoration: none; } /*стиль для элементов первого уровня, т.е. дочерних страниц*/ #menu li{ list-style: none; float: left; } /*стиль для элементов дочернего меню*/ #menu li ul li{ float: none; } #menu ul{ background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

После добавления стилей меню должно выглядеть примерно так:

4. Далее было бы неплохо, выделять активные страницы. В моем блоге и раньше публиковалась статья, на эту тему, правда она не затрагивала дочерних страниц. То есть фактически если мы находимся на дочерней странице, хорошо бы знать, ее родительскую страницу. Это реализуется довольно просто, с помощью CSS:

Current_page_item, .current_page_parent{ background: #07599d; text-decoration: none; }

Здесь.current_page_item — текущая активная страница (на скриншоте ниже это страница «партнерам»), .current_page_parent — это ее родительская страница.

5. Все бы хорошо, но выпадающее меню, на то и названо, чтобы появляться и исчезать, при наведении мыши, а не постоянно отображаться на экране. Поэтому для начала мы спрячем его с помощью CSS, а затем будем показывать с помощью JQuery.

/*строка display:none прячет выпадающее меню*/ #menu ul{ display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show(); }, function(){ jQuery(this).find("ul").hide(); }); });

В принципе этого достаточно, теперь при наведении мыши к имени страницы, будет отображаться дочернее меню. Но можно пойти дальше, и добавить различные эффекты появления дочернего меню.

6. Эффект медленного появления дочернего меню, делается очень просто, путем изменения высоты, ширины и прозрачности отображаемого блока. Пондобится просто добавить один параметр, к уже написанному коду:

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ jQuery(this).find("ul").hide(); }); });

Можно добавить эффект появления без прозрачности, вертикальный:

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").slideDown(); }, function(){ jQuery(this).find("ul").slideUp(); }); });

Если возникла необходимость, отображать выпадающее меню постоянно, если дочерняя страница активна (подходит для вертикального бокового меню), то это делается следующим образом:

jQuery(document).ready(function(){ if(jQuery("#menu li").hasClass("current_page_parent")){ jQuery("#menu li ul").show(); } jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ if (!jQuery(this).hasClass("current_page_parent")){ jQuery(this).find("ul").hide(); } }); });

Возможно пример не слишком изящный с точки зрения программирования (если есть предложения по улучшению, с радостью исправлю), но работать будет.

Как видно, выпадающее меню под силу сделать любому пользователю, и его внешний вид полностью зависит от вашей фантазии, и знания эффектов jQuery.