wordpress вертикальное меню с раскрывающимися рубриками

Простое раскрывающееся вертикальное меню в WordPress

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальное раскрывающееся меню на CSS

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

HTML

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

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

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

JavaScript

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

Источник

Как создать боковое меню в wordpress

Те кто пользуется движком wordpress наверное заметили, что часто не всегда просто создать нужное боковое меню на сайте. Как создать вертикальное раздвижное меню именно об этом пойдет речь в данной статье.

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

Установка бокового меню в wordpress

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

Видео установка плагина jQuery Slick Menu

Создание вертикального меню с помощью плагина jQuery Vertical Accordion Menu

Данный бесплатный плагин позволяет создать вертикальное раздвижное меню. Причем по умолчанию, уже есть пару готовых вариантов шаблонов меню, причем с различными цветами. Самая главная особенность данного плагина в том, что он позволяет создавать именно раздвижное меню. Это очень удобно, если скажем, в одном пункте меню у вас есть несколько подпунктов. При наведении мышкой на первый раздел будет раскрываться дополнительный список пункта. Еще одной приятной особенностью, которой обладает Vertical Accordion Menu, является наличие специального шорт-кода плагина. Который можно разместить в самих записях сайта, тем самым создав там меню.

плагин позволяет создавать различного цвета и стиля меню

Установить плагин можно через саму админку вордпресса, набрав там «jQuery Vertical Accordion Menu» или же скачать с официального сайта автора. После установки плагина, вам нужно зайти в «Виджеты», найти там виджет плагина, и перетянуть его в сайдбар. В самом виджете вы найдете все необходимые настройки плагина. Хочется добавить, что у автора jQuery Vertical Accordion Menu есть и другие специальные плагины, которые позволяют создавать различные многоуровневые меню, как вертикальные, так и горизонтальные.

Таким образом, создать вертикальное выпадающие (раздвижное) меню в wordpress, не так уж сложно, если использовать специальные плагины.

Источник

Вертикальное меню с выпадающим списком на WordPress

Сегодня разберем, как сделать на WordPress вертикальное меню с выпадающим списком при помощи плагина. Делается всё очень просто, а главное, большинство функций у плагина бесплатные.

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

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

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

После этого у вас уже заработает выпадающее вертикальное меню со стандартными настройками. Далее можно перейти в настройки плагина и поменять внешний вид. Делается это во вкладке «Basic configuration/skin»

По умолчанию, в бесплатной версии, есть всего три темы на выбор: синяя, светлая и серая. В нашем случае мы выберем светлую тему «Vanilla». Если же данные цветовые решения и сам стиль меню вам не подходят, то их можно поменять при помощи правки CSS кода. Но это уже другая история.

Каким ещё функционалом обладает плагин вертикального меню для WordPress

Платная версия плагина Bellows Accordion Menu

В платной версии доступно:

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

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Плагины для создания вертикального выпадающего меню (аккордион)

Здравствуйте, сегодня расскажу о плагинах, позволяющих достаточно легко создать вертикальное меню на сайте.
Скачать исходники для статьи можно ниже
Фреш казино зеркало

1. JQuery Accordion Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-5-14

Демо пример можно посмотреть на сайте:

Создает вертикальное меню (аккордион) из любого WordPress пользовательское меню с помощью jQuery.

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

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

Или же можно воспользоваться следующим шорткодом: [dcwp-jquery-accordion menu=”Test Menu”]

, где вместо Test Menu указываем название меню.

2. JQuery Vertical Mega Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-6-30

Демо пример можно посмотреть на сайте:

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

Может работать с несколькими вертикальными мега меню на каждой странице и предлагает 3 эффектов анимации.

3. JQuery Drill Down Ipod Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2011-5-15

Демо пример можно посмотреть на сайте:

Добавляет виджет, который позволяет создавать разворачивающееся меню в стиле ipod из любого пользовательского меню wordpress с использованием JQuery.

4. Collapsing Categories

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-6-20

Как работает плагин можете посмотреть у меня на сайте в боковой колонке справа.

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

Об установке и настройке данного плагина можете прочитать в моей статье: Вертикальное меню с раскрывающимися рубриками, плагин Collapsing Categories

5. WordPress Menu Vertical

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2013-2-11

Демо пример можно посмотреть на сайте:

Folder Menu Vertical – это флэш-динамический модуль меню для вашего WordPress сайта.

5. jQuery Categories List Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2013-4-19

Демо пример можно посмотреть на сайте в боковой колонке:

Создает простой виджет с помощью JQuery для отображения категорий в виде выпадающего списка с некоторыми эффектами.

Похожие записи:

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Источник

Создание вертикального меню в WordPress

Здравствуйте уважаемые будущие веб-мастера. Продолжаем изучать Консоль WordPress

В Консоли WP можно создать меню, которое будет отображаться в боковой колонке Вашего сайта.

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

Для того чтоб было чем наполнить меню, нужно создать рубрики. Заходим в Панель инструментов — записи — рубрики.

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

Во втором, прописывается то же название, только английскими буквами. Например, если в первом написано «Рубрика», то во втором надо написать «rubrika».

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

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

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

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

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

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

После того, как меню создано, необходимо нажать «Сохранить меню».

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

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

После завершения всех манипуляций, не забудьте «Сохранить меню».

Следующим шагом, нам нужно разместить созданное меню на страницах сайта. Для этого проходим Внешний вид > Виджеты, и находим виджет «Произвольное меню».

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

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

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

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

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

Теперь, если на странице сайта щёлкнуть по названию рубрики в меню, то она откроется, и в ней будет написанная Вами, для этой рубрики, статья.

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

Перемена

— «Мудрость мужчины» — блюдо из яиц барана.
— Сукияки — мясо по японски (говядина)
— Мусака — греческая запеканка
— «Виселица» — куски мяса висят как на виселице. Перед подачей на стол поджигается. очень красиво.
— Бычьи тестикулы
— Суп с креветками «Виагра»
-Литовский кофе «Cafe Americano»
— «Веселая семейка» — салат из раковых шеек

Источник