Css для выпадающего меню на wordpress

Содержание
  1. Выпадающее меню для WordPress на CSS
  2. Демо-версия
  3. Создаем меню в WordPress
  4. Добавление пользовательского Walker-класса в functions.php
  5. Вывод меню через файл темы
  6. Добавление CSS
  7. Исходные файлы
  8. Устранение неполадок
  9. Как в WordPress создать выпадающее меню (руководство для начинающих)
  10. Зачем использовать выпадающие меню в WordPress?
  11. Выбор темы оформления с поддержкой выпадающего меню
  12. Создание выпадающего меню в WordPress
  13. Шаг 1. Создание меню навигации в WordPress
  14. Шаг 2. Добавление подпунктов в меню
  15. Шаг 3. Опубликуйте выпадающее меню
  16. Советы по созданию интерактивных выпадающих меню
  17. 1. Используйте многоуровневые выпадающие меню
  18. 2. Создайте несколько выпадающих меню
  19. 3. Создавайте меню с помощью предварительного просмотра
  20. 4. Создание большой навигации в виде выпадающего меню WordPress
  21. Горизонтальное выпадающее меню для WordPress
  22. Создаем структуру WordPress меню
  23. CSS код выпадающего WordPress меню
  24. Кроссбраузерное горизонтальное CSS меню в WordPress
  25. Сниппет
  26. Простое раскрывающееся вертикальное меню в WordPress
  27. Вертикальное раскрывающееся меню на CSS

Выпадающее меню для WordPress на CSS

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

Примечание: я буду использовать WordPress 3.9 и тему Twenty Thirteen, но все действия аналогичны для любого сайта на WordPress 3.

Демо-версия

Ниже приведена ссылка на скачивание ZIP-архива , который содержит все необходимые для этой статьи коды.

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Создаем меню в WordPress

WordPress 3 имеет простой в использовании drag-and-drop интерфейс для создания структуры меню. Если вы еще не работали с меню, чтобы создать и сохранить пользовательское меню, перейдите Внешний вид > Меню . Задайте для меню название и сохраните его:

Добавление пользовательского Walker-класса в functions.php

Прежде, чем мы сможем вывести меню в файле темы WordPress , нам нужно добавить Walker-класс WordPress в файл functions.php .

Этот код « очистит » выводимую HTML-разметку нашего меню, чтобы мы могли легко создавать CSS . Скопируйте и вставьте код класса Walker в файл functions.php , который располагается в папке темы. Если файл functions.php не существует, создайте его, а затем вставьте в него код класса:

Вывод меню через файл темы

Теперь у нас есть созданное меню и размещенный класс Walker . Пришло время вывести наше меню через файл темы. Для этого мы используем функцию wp_nav_menu() . С помощью PHP мы вызовем эту функцию и передадим ей параметры нашего меню для вывода структуры HTML .

Параметр menu — это название меню, созданного нами в шаге 1. container_id добавляет в HTML-код меню идентификатор CSS , который мы будем использовать позже в стилях CSS . Параметр Walker указывает функции wp_nav_menu() использовать для вывода HTML -разметки наш пользовательский Walker-класс WordPress :

Добавьте этот PHP-код в один из файлов темы. Где бы вы его не поместили, меню будет выводиться в этом месте. Я использую тему WordPress по умолчанию Twenty Thirteen . Она содержит файл header.php , в него я и вставлю этот код.

Если вы сделали все правильно, то сейчас должны увидеть, что в вашей теме отображается HTML-список без заданных стилей:

Добавление CSS

Откройте файл CSS вашей темы styles.css ( в папке CSS или в корневом каталоге темы ). Вы можете сразу скопировать и вставить весь приведенный ниже код в файл CSS вашей темы. Я буду разбивать CSS-код на части, чтобы пояснять каждый его фрагмент.

Обратите внимание, что мы используем тот же идентификатор, который мы указали в функции wp_nav_menu() — #cssmenu.

Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:

Следующий фрагмент CSS-кода — это стили первого уровня выпадающего меню. Если браузер пользователя не поддерживает градиенты, то заполните фон цветом #3c3c3c .

Псевдокласс :after позволяет добавить тонкую цветную рамку вокруг каждого пункта меню:

Читайте также:  Как напечатать на принтер pantum m6500

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

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

Сначала нам нужно установить для всех пунктов подменю display: none . После этого мы используем псевдокласс :hover , чтобы установить для подменю состояние:hover . Это создаст эффект скрытия и вывода подменю при наведении указателя мыши на родительский элемент:

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

Исходные файлы

По этой ссылке вы можете скачать исходные файлы. ZIP-архив содержит functions.php и styles.css :

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Устранение неполадок

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

Единственный способ решить эту проблему — определить эти стили CSS и удалить их. Лучше всего использовать для этого расширение Firebug для Firefox и проинспектировать стили CSS вручную. Как только вы найдете конфликтующие стили, удалите их.

Вадим Дворников автор-переводчик статьи « CSS Dropdown Menu in WordPress »

Источник

Как в WordPress создать выпадающее меню (руководство для начинающих)

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

Зачем использовать выпадающие меню в WordPress?

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

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

Выбор темы оформления с поддержкой выпадающего меню

Почти все темы оформления WordPress по умолчанию поддерживают выпадающие меню. Но не все. Поэтому нужно убедиться, что используется тема, которая поддерживает выпадающие меню. Вот несколько из них:

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

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

Перейдите в меню « Внешний вид» — «Меню» и нажмите кнопку « Создать новое меню» .

Далее введите название меню навигации.

Затем нажмите кнопку « Создать меню» . После этого WordPress создаст новое пустое меню.

Чтобы добавить в меню навигации ссылки верхнего уровня, выберите страницы, которые вы хотите добавить в меню. Это можно сделать в левом столбце. Затем нажмите кнопку « Добавить в меню» .

После этого выбранные вами ссылки появляются в правом столбце и созданном меню.

Шаг 2. Добавление подпунктов в меню

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

Но пока эти ссылки будут отображаться как обычные пункты меню. Их нужно сделать подпунктами путем перетаскивания под родительский элемент.

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

Шаг 3. Опубликуйте выпадающее меню

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

Теперь посетите сайт, чтобы увидеть выпадающее меню в действии.

Советы по созданию интерактивных выпадающих меню

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

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

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

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

Читайте также:  Linux mint не запускается busybox

2. Создайте несколько выпадающих меню

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

3. Создавайте меню с помощью предварительного просмотра

Если меню становится слишком сложным, можно переключиться на визуальный предварительный просмотр. Для этого перейдите в меню « Внешний вид» – «Настроить» .

Затем перейдите на вкладку « Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.

4. Создание большой навигации в виде выпадающего меню WordPress

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

Мы надеемся, что эта статья помогла вам понять, как создать выпадающее меню в WordPress.

Вадим Дворников автор-переводчик статьи « How to Create a Dropdown Menu in WordPress (Beginners Guide) »

Источник

Горизонтальное выпадающее меню для WordPress

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

Создаем структуру WordPress меню

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

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

CSS код выпадающего WordPress меню

Меню в вашем шаблоне выводится с помощью PHP кода:

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

Теперь вам осталось добавить следующий CSS код выпадающего меню в файл style.css и у вас все должно заработать:

У вас должно получиться что-то наподобие вот такого симпатичного меню 🙂

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

Источник

Кроссбраузерное горизонтальное CSS меню в WordPress

Опубликовано: ADv Дата 20.02.2014 в рубрике Код за плагин Комментировать

Каскадные таблицы стилей (CSS) стали настолько мощным инструментом, что теперь даже можно не использовать JavaScript для эффектов при наведении мыши, а также можно не использовать изображения, чтобы украсить сайт. С новым CSS3 появилось много свойств, которые просто отлично выглядят на сайтах. Это и вращения, градиенты, тени и скругленные углы, хотя ни одно из них не поддерживается в старых версиях Internet Explorer, но это никого не останавливает.

Сниппет в этой статье позволит добавить простое CSS меню в стандартное меню WordPress. Не нужно создавать свои классы CSS или menu walker для обеспечения совместимости.

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

1. Добавляем “register_nav_menu( ‘primary’, ‘Primary Menu’ );” в ваш файл functions.php
2. Добавляем “wp_nav_menu( array( ‘theme_location’ => ‘primary’) );” в то место, где вы хотите вывести ваше меню.
3. Переходим в WP-Admin > Внешний вид > Меню, добавляем меню и подменю и нажимаем «Сохранить»
4. В “Управлении областями”, выберите ваше меню в выпадающем списке “Основное меню”. Вот и все.

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

Сниппет

Добавляем сниппет в таблицу стилей вашей темы, в итоге получим примерно такое меню:

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

Источник

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

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

Читайте также:  Qt задать компилятор для сборки linux

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

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

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

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

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

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

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

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

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

.menu .dropdown .sub-menu

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

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

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

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

jQuery(‘.menu .dropdown a’).click(function(e)<

jQuery(‘.menu .dropdown > a’).click(function(e)<

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

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

HTML

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

CSS

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

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

JavaScript

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

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

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

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector