Все знают, что навигация на сайте должна быть одновременно простой и в тоже время, максимально удобной. Именно поэтому, на своих сайтах многие используют выпадающее меню. В этой статье мы кратко рассмотрим, как на своем 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(); } ); });Вот так будет выглядеть готовое меню, которое будет радовать глаз посетителей:
Как Вы поняли, в создании выпадающего меню нет ничего сложного, и Вы сможете своими руками сделать его на своем сайте, главное все делайте внимательно.
Выпадающие мега-меню - отличная дизайнерская находка.Навигация по сайту , содержащим большое количество страниц, всегда представляла собой определенную проблему. Классическое статическое меню а-ля sitemap быстро разрастаются по мере роста числа страниц и занимают очень много места. Динамические выпадающие меню позволяют существенно экономить пространство страницы, но в жертву приносится удобство пользования - для навигации требуется активная и довольно точная работа мышью. Чуть промахнулся и раскрывается не то меню.
Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой - значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.
Как бы там ни было, а мега-меню сейчас, что называется, в тренде и если вы до сих пор еще не использовали его, то стоит присмотреться к нему поближе.
UberMenu: WordPress Mega Menu PluginЭтот многофункциональный плагин смело можно поставить на первое место в этом обзоре: создаваемое им мега-меню полностью , имеет невероятное количество различных опций, в том числе управления цветом фона и шрифта, размером шрифта и т.п. И все это выполняется из мощной и удобной панели настроек.Кроме того меню также имеет ряд других замечательных особенностей, таких как:
Стоимость: $19
Стоимость: $15
Плагин предлагает широкие возможности для создания меню с современным и стильным дизайном: вертикальной или горизонтальной ориентацией, возможностью включать в пункты меню ссылки, изображения и даже карточки товаров WooCommerce или Easy Digital Downloads, что может пригодиться при разработке интернет-магазинов.
Стоимость: $19
Стоимость: $6
Стоимость: $29
Содержимое пунктов меню может представлять собой текст, ссылки, изображения, видео , формы и различные виджеты . Для размещения всего этого используется собственная 12-колоночная сетка.
Стоимость: $15
Дизайн современный и стильный и, конечно же, полностью .
Стоимость: $19
Одним из представителей данной разновидности мега-меню является Superfly - Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.
Стоимость: $22
Toggle menu - очень простое, минималистическое меню , которое, тем не менее, отлично справляется со своей основной функцией.
Стоимость: $5
В распоряжение разработчика WP Floating Menu Pro предлагает 13 и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.
Стоимость: $17
Стоимость: $14
Способен автоматически преобразовывать уже существующие обычные меню в одно мега-меню с полным контролем над процессом преобразования и сохранением или переназначением соответствующих действий.
01.10.2013 Ромчик
Доброго времени суток. В одном из проектов мне пришлось создать тему для WordPress с выпадающим меню. В данной статье я расскажу, как сделать выпадающее меню в WordPress , и как изменить отображение меню WordPress , подгоняя под шаблон. На самом деле создать выпадающее меню в WordPress довольно просто. Давайте первым шагом мы сделаем выпадающее меню, а вторым шагом настроим вид выпадающего меню.
Шаг 1. Создание выпадающего меню в WordPressВыпадающее меню в WordPress создается в админке. Для этого переходим в «Внешний вид»-> «Меню»
Если при переходе в пункт «Меню» у Вас появляется надпись «Текущая тема не поддерживает создания меню…», то не расстраивайтесь. Как включить поддержку меню в теме Вы можете прочитать у меня в статье «Добавление поддержки собственного меню в тему для WordPress »
После перехода в пункт меню мы видим окно редактирования меню:
Создадим новое меню. Для этого в пункте «Название меню» введм название меню и нажмем «Создать меню».
Теперь добавим пункт меню. Например страницу «Главная». Выбираем ее в левой части и жмем «Добавить в меню». Дальше в правой части жмем «Сохранить меню». Все пункт меню добавлен.
Мы можем его подредактировать. Для этого нажмите на стрелочку рядом с надписью «Страница». Мы можем изменить текст ссылки. Для этого в поле «Текст ссылки» укажите необходимый текст. В поле «Атрибут title» мы можем указать title ссылки. Мы можем удалить данный пункт меню, нажав на ссылку «Удалить» или отменить все изменения, нажав по ссылке «Отмена». После внесения всех изменений необходимо нажать «Сохранить меню».
Аналогичным образом создадим еще несколько пунктов меню.
Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».
Теперь мы хотим, чтобы пункт «Без рубрики» стал подпунктом пункта «Главная». Для этого просто перетащите пункт «Без рубрики вправо».
После всех изменений не забывайте сохранять меню.
Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.
Шаг 2. Настройка внешнего вида меню.Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:
Теперь наведем курсор мыши на пункт «Главная»
Как видим появился выпадающий подпункт «Без рубоики».
Теперь давайте рассмотрим подробнее html код нашего меню:
Теперь изменяя CSS свойства данных классов мы с легкостью можем привести наше меню к любому виду. Еще раз напомню, что приведенные классы для меню – это автоматически генерируемы классы по умолчанию WordPress.
В данной статье мы с Вами рассмотрели как создать меню в WordPress, как создать пункты и подпункты меню в WordPress. А также затронули основные 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; }
После добавления стилей меню должно выглядеть примерно так:
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.
Описание лучших бесплатных плагинов для меню в WordPress, которые позволят вам легко создавать на вашем сайте горизонтальные и вертикальные выпадающие меню.
JQuery Vertical Mega Menu WidgetЭтот плагин для WordPress позволит вам при создании виджета добавлять вертикальное меню в ваши колонки, просто используйте меню пользователя в WordPress с помощью данного плагина.
Особенности JQuery Vertical Mega Menu Widget:Это один из наиболее известных бесплатных плагинов меню для WordPress, который позволяет добавлять разнообразные меню. Вам не нужна дополнительная прокрутка.
Особенности Admin Menus Fixed:Создавайте различные выпадающие меню с использованием меню пользователя в WordPress, просто используя jQuery.
Особенности JQuery Mega Menu:Автоматическая генерация классификации для меню, пользовательских записей и добавление пользовательских ссылок на ваш сайт.
Особенности WP-Easy Menu:Создавайте горизонтальное и вертикальное выпадающего меню с помощью этого известного плагина для меню в WordPress
Особенности jQuery Dropdown Menu:Этот бесплатный плагин для меню в WordPress позволяет создавать пользовательские выпадающие навигационные меню, имеет множество тем CSS, которые являются частью основных характеристик плагина.
Особенности Dropdown Menu Widget:Создавайте прекрасное горизонтальное выпадающее меню с помощью плагина Ozh’ Admin Drop Down.
Особенности Ozh’ Admin Drop Down Menu:Изменяйте расположение меню с вертикального на горизонтальное, плагин совместим с WordPress 3.0 и выше.
Особенности WordPress Menu Vertical:Создавайте выпадающее меню с помощью плагина The official plugin for OpenMenu, получайте удовольствие от его работы.
Особенности OpenMenu:Название этого бесплатного плагина меню для WordPress говорит о его работе, вы можете легко редактировать и просматривать порядок, установленный для выпадающего меню.
Очень простое классификационное меню может быть создано с помощью Custom Taxonomies Menu Widget, также вы можете использовать панель управления виджета для дополнительных опций.
Особенности Custom Taxonomies Menu Widget:Используйте более продвинутые виджеты и шорткоды для создания красивого выпадающего меню с помощью этого бесплатного плагина для меню.
Особенности JQuery Accordion Menu Widget:Удобные меню поиска и редактирования, создание иерархического выпадающего меню и упорядочивание всех меню так, как вам нужно.
Особенности Admin Menu Tree Page View:Автоматически встраивается в WordPress 3.0 и выше, меню в окне выбора лучшее для мобильных устройств. Этот бесплатный плагин для меню в WordPress весьма интересен в использовании.
Особенности Responsive Select Menu:
