sonyps4.ru

Wordpress плагин выпадающее меню рубрик. Выпадающее меню в wordpress

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

JQuery Vertical Mega Menu Widget

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

Особенности JQuery Vertical Mega Menu Widget:
  • Нумерация элементов в строке
  • Эффект анимации
  • Управление анимацией
  • Скорость анимации
  • 8 различных обложек
Admin Menus Fixed

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

Особенности Admin Menus Fixed:
  • Работает с WordPress 3.5+
  • Имеет три варианта Admin Menus Fixed
  • Включает в себя панель инструментов WordPress
  • Автоматически встраивается в WordPress
  • Показывает элемент окна администратора
JQuery Mega Menu Widget

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

Особенности JQuery Mega Menu:
  • Наведение/Клик
  • Нумерация элементов в строке
  • Несколько обложек
  • Эффект анимации
  • Скорость анимации
  • Набор подменю
WP-Easy Menu

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

Особенности WP-Easy Menu: jQuery Dropdown Menu

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

Особенности jQuery Dropdown Menu:
  • Цвет заднего фона в главном меню
  • Скруглённые границы (или нет)
  • Разделение кнопок
  • Указатель мыши поверх цвета заднего фона
  • Задаётся размер и цвет шрифта в меню
Dropdown Menu Widget

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

Особенности Dropdown Menu Widget: Ozh’ Admin Drop Down Menu

Создавайте прекрасное горизонтальное выпадающее меню с помощью плагина Ozh’ Admin Drop Down.

Особенности Ozh’ Admin Drop Down Menu:
  • Выпадающее меню для CSS
  • Интерфейс API для программистов
  • Не поддерживаются инсталляции WordPress
WordPress Menu Vertical

Изменяйте расположение меню с вертикального на горизонтальное, плагин совместим с WordPress 3.0 и выше.

Особенности WordPress Menu Vertical:
  • Индивидуальное меню с использованием различных параметров
  • Фиксация положения меню во время прокрутки
  • Хорошие Flash эффекты
  • Интерфейс полностью интегрирован в администрирование WordPress
The official plugin for OpenMenu

Создавайте выпадающее меню с помощью плагина The official plugin for OpenMenu, получайте удовольствие от его работы.

Особенности OpenMenu: Admin Menu Tree Page View

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

  • Возможность изменить порядок
  • Обзор всех страниц
  • Иерархическая древовидная структура
  • Совместимость с WPML
Custom Taxonomies Menu Widget

Очень простое классификационное меню может быть создано с помощью Custom Taxonomies Menu Widget, также вы можете использовать панель управления виджета для дополнительных опций.

Особенности Custom Taxonomies Menu Widget:
  • Выбор классификации пользователя для отображения
  • Изменение порядка отображения в пользовательских классификациях
  • Возможность выбора, следует ли отображать классификацию
  • Возможность выбора, следует ли отображать список терминов в виде иерархии
JQuery Accordion Menu Widget

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

Особенности JQuery Accordion Menu Widget: Admin Menu Tree Page View

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

Особенности Admin Menu Tree Page View:
  • Изменение порядка страниц
  • Просмотр всех страниц
  • Совместимость с WPML
Responsive Select Menu

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

Особенности Responsive Select Menu:
  • Устойчивая работа на мобильных устройствах
  • Более лёгкая навигация для устройств с сенсорным экраном
  • Не нуждается в дополнительном PHP-коде

Каждый администратор сайта на 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». Если перетащить его в определенную область, то данное горизонтальное выпадающее меню будет отображено в этой колонке на ресурсе. Кстати, виджет полностью настраивается прямо тут, что весьма удобно.

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

Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой - значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.

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

UberMenu: WordPress Mega Menu PluginЭтот многофункциональный плагин смело можно поставить на первое место в этом обзоре: создаваемое им мега-меню полностью , имеет невероятное количество различных опций, в том числе управления цветом фона и шрифта, размером шрифта и т.п. И все это выполняется из мощной и удобной панели настроек.

Кроме того меню также имеет ряд других замечательных особенностей, таких как:

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

Стоимость: $19

Mega Main MenuОчень популярный и широко используемый плагин Mega Main Menu умеет держать баланс между функциональностью и простотой. В вашем распоряжении свыше 10 различных инструментов для создания выпадающих меню, которые могут содержать текст, изображения, ссылки и виджеты . А кроме этого - неограниченные цветовые настройки и свыше 600 шрифтов Google.

Стоимость: $15

Liquida Mega MenuLiquida Mega Menu - современный и многофункциональный плагин, который подойдет как обычным пользователям, так и разработчикам - его можно легко встроить в собственную разрабатываемую тему.

Плагин предлагает широкие возможности для создания меню с современным и стильным дизайном: вертикальной или горизонтальной ориентацией, возможностью включать в пункты меню ссылки, изображения и даже карточки товаров WooCommerce или Easy Digital Downloads, что может пригодиться при разработке интернет-магазинов.

Стоимость: $19

Sky Mega MenuТри варианта дизайна для мобильных устройств, 9 цветовых схем, собственная сетка, формы и 360 векторных иконки. Этот набор позволяет Sky Mega Menu занять достойное место среди себе подобных.

Стоимость: $6

WP Mega MenuПлагин из категории must have. Множество настроек и опций, работа с категориями, подкатегориями и сообщениями, SEO-оптимизация и две предустановленные цветовые схемы (темная и светлая), которые, впрочем, можно легко изменить по своему вкусу.

Стоимость: $29

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

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

Стоимость: $15

Hero Menu – Responsive WordPress Mega Menu PluginHero Menu позволяет привязывать к пунктам меню ссылки на сообщения, категории, внешние URL, а также отображать в них записи блога вместе с featured image. В последней версии анонсирована полная поддержка платформы WooCommerce. Для удобной работы имеет встроенный drag-and-drop редактор .

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

Стоимость: $19

Superfly - Responsive WordPress Menu PluginТак называемое fly-меню - последний тренд в мире веб-дизайна. Такое меню тихо «дремлет» в углу странички в виде пиктограммы, практически не занимая места, а при наведении курсора раскрывается, смещая элементы страницы, а не перекрывая их.

Одним из представителей данной разновидности мега-меню является Superfly - Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.

Стоимость: $22

Toggle MenuС ростом популярности мобильных устройств, всплывающие (или контекстные) меню приобретают важное значение, поскольку позволяют значительно экономить экранное пространство.

Toggle menu - очень простое, минималистическое меню , которое, тем не менее, отлично справляется со своей основной функцией.

Стоимость: $5

WP Floating Menu ProWP Floating Menu Pro - это плагин 2 в 1. Меню-навигатор для одностраничного сайта и меню-наклейки. Более того: при помощи этого плагина вы сможете, по крайней мере визуально, превратить свой традиционный сайт в современный одностраничный. WP Floating Menu Pro обеспечит плавную прокрутку от одной части страницы к другой.

В распоряжение разработчика WP Floating Menu Pro предлагает 13 и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.

Стоимость: $17

Flexi Menu WordPress PluginFlexi Menu - это 5 различных, полностью настраиваемых типа меню: fly-меню , широкое (на ширину страницы), широкое+описания, широкое+изображения и вертикальное.

Стоимость: $14

Max Mega Menu (Free)Очень неплохой плагин с drag-and-drop редактором меню и возможностью встраивания в пункты меню практически любых виджетов - от контактных форм до карт Google .

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

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

Начнем с самого простого, как создать выпадающее меню в 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.



Загрузка...