Простое раскрывающееся вертикальное меню в WordPress. Как создать выпадающее меню из рубрик WordPress без написания кода

01.10.2013 Ромчик

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

Шаг 1. Создание выпадающего меню в WordPress

Выпадающее меню в WordPress создается в админке. Для этого переходим в «Внешний вид»-> «Меню»

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

После перехода в пункт меню мы видим окно редактирования меню:

Создадим новое меню. Для этого в пункте «Название меню» введм название меню и нажмем «Создать меню».

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

Мы можем его подредактировать. Для этого нажмите на стрелочку рядом с надписью «Страница». Мы можем изменить текст ссылки. Для этого в поле «Текст ссылки» укажите необходимый текст. В поле «Атрибут title» мы можем указать title ссылки. Мы можем удалить данный пункт меню, нажав на ссылку «Удалить» или отменить все изменения, нажав по ссылке «Отмена». После внесения всех изменений необходимо нажать «Сохранить меню».

Аналогичным образом создадим еще несколько пунктов меню.

Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».

Теперь мы хотим, чтобы пункт «Без рубрики» стал подпунктом пункта «Главная». Для этого просто перетащите пункт «Без рубрики вправо».

После всех изменений не забывайте сохранять меню.

Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.

Шаг 2. Настройка внешнего вида меню.

Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:

Теперь наведем курсор мыши на пункт «Главная»

Как видим появился выпадающий подпункт «Без рубоики».

Теперь давайте рассмотрим подробнее html код нашего меню:

• Все меню по умолчанию заключено в div с классом menu-menu-container .
• Дальше идет список ul с классом menu .
• Каждый пункт меню заключен в li со многими классами, но нам интересны два класса menu-item и current-menu-item (этот класс только у текущего пункта меню)
• Подпункты определенного пункта заключены в список ul с классом sub-menu .
• Каждый подпункт заключен в li с теми же классами, что и пункты родительского меню.

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

В данной статье мы с Вами рассмотрели как создать меню в WordPress, как создать пункты и подпункты меню в WordPress. А также затронули основные CSS-классы меню WordPress

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

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

При помощи штатных инструментов WordPress можно выполнить простую, но лишенную всяких лишних «наворотов» навигацию на сайте.

Сделать меню можно и при помощи сторонних плагинов, поэтому для тех, кому стандартного функционала окажется мало, рассмотрим возможности и настройку плагина Dropdown Menu. Итак, перейдем к рассмотрению варианта создания выпадающего меню при помощи штатных инструментов.

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

В первую очередь авторизуемся на сайте и переходим в админ панель, где конкретно нас будет интересовать раздел «Внешний вид – Меню». Основной код Вордпресс сделан таким образом, что позволяет делать меню из трех «ингредиентов»: «Страницы сайта», «Рубрики», «Произвольные ссылки».

• «Страницы сайта» и «Рубрики» выбираются из уже существующих на вашем WordPress сайте («черновые записи» рубрик и страниц в этот список не попадают);
• «Произвольные ссылки» дают возможность вставить в меню любой URL – ведущий на внешнюю или внутреннюю страницу сайта (к примеру, можно вставить ссылку на главную страницу меню или добавить рекламный линк, ведущий на ресурс партнера).

Пределов на количество меню нет, но практика показывает, что при чрезмерном «злоупотреблении», на ресурсе WordPress могут возникнуть проблемы с нормальной загрузкой страницы и отображением админки. Создавать специальные меню про запас – бессмысленное занятие, ведь есть ограничения по местам для их расположения; каждая тема создается с расчетом определённых мест под меню (как правило, это 1-2 места).

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

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

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

При корректном исполнении в «Меню» появится URL под названием «Главная». Рядом с ним будет красоваться опция «Произвольно», при нажатии на которую можно:

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

Мы изменять ничего не будем, у нас так и останется пункт под названием «Главная страница». Меню уже можно считать созданным, но его еще необходимо разместить на ресурсе. На этой же странице из выпадающего меню выбираем пункт Navigation (Main или Top), выбираем созданную нами менюшку и нажимаем «Сохранить». Вот и все, меню было создано и размещено на площадке Вордпресс.

Давайте сделаем еще одно меню, но уже со страницами и рубриками. Создаем новое меню под названием, например, «Рубрики» и сохраняем его. Смотрим в окна «Страницы» и «Рубрики», где и выбираем нужные вам страницы и/или рубрики, которые будут добавлены в меню (для добавления элемента используйте ссылку «Добавить в меню»). Тут же на свое усмотрение можно изменить структуру будущего меню (можно менять расположение пунктов, создавать родительские и дочерние пункты).

Стиль меню всегда будет задаваться дизайном шаблона сайта, и иногда меню может получать не самый удачный вид. Если стандартное решение вас никак не устраивает – ничего страшного, решение есть – установим плагин «Dropdown Menu Widget».

Dropdown Menu Widget – функциональное выпадающее меню для Вордпресс

Этот плагин позволяет сделать выпадающее меню – горизонтальное или вертикальное. Причины установки плагина могут быть разнообразными: когда стандартное выпадающее меню не устраивает по определённым причинам, и хочется сделать что-то оригинальное; когда возникает необходимость в создании, к примеру, дополнительного меню (горизонтальное или вертикальное) для боковой колонки, а штатный виджет выглядит не самым лучшим решением.

Получить плагин можно по URL: https://ru.wordpress.org/plugins/dropdown-menu-widget/ . После включения плагина будут доступны его настройки, состоящие из пяти разделов: «General», «Effects», «Custom colors», «Advanced», «Template Tag». На стартовой вкладке «General» необходимо сделать замену слова «Home» на «Главная» (можно присвоить другое имя, на выбор). Раздел «Effects» управляет опциями эффектов и переходами между пунктами меню (можно выставить скорость, продолжительность задержки, а также внешний вид эффекта). «Custom colors» позволяет сделать/оформить без «копания» в коде CSS стили меню, схемы ссылок, разделы меню, фон и т.п.

Благодаря разделу «Template Tag» можно выполнить настройку отображения определённого меню, которое потом можно будет вставить в вашу тему Вордпресс при помощи использования функции:

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

Пункт «Menu Tyre» позволяет выбрать тип меню, который будет размещен. Тут также присутствуют дополнительные параметры (можно выбрать, какое меню использовать – вертикальное или горизонтальное выпадающее меню), настроить выравнивание, исключить определённые страницы по ID, настроить показ формы для логина, добавить нового участника и ссылки.

Заметим, что узнать ID номер рубрик или страниц в WordPress можно в одноименных разделах. Если навести мышкой на определённую страницу или рубрику, то в нижнем левом углу браузера будет показана ссылка, в конце которой будут присутствовать цифры – вот это и есть ID.

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

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

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

1. Перед тем, как создать выпадающее меню, обязательно удалите стандартное меню. Откройте файл — sidebar.php , найдите в нем строчку:

и смело ее удаляйте;

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

Значение «menu» указывает на то, что меню будет для страниц, а если изменить это значение на «categories», то это меню будет выводить все созданные рубрики;

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; }

5. Самый важный и последний шаг, который сделает из меню, выпадающее. Для этого в style.css редактируем последний блок стиля выпадающего меню и делаем его таким:

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

Теперь необходимо подключить jquery к нашему шаблону, а для этого снова идем в файл — header.php, прописываем там строчку:

И добавляем код, который позволит показывать меню дочернее при наведении:

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

Вот так будет выглядеть готовое меню, которое будет радовать глаз посетителей:

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

Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в своем 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; }

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

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.

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

Итак, если у вас в проекте имеется сложная структура меню со множеством подразделов и страниц в них, то в целях экономии места вполне можно использовать раскрывающийся эффект. Рассмотрим его реализацию для 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 вам, конечно, больше пригодится первый вариант. Он максимально прост в реализации и использовании (даже рядовой юзер сможет добавлять новые разделы в данное меню).