Css код меню wordpress

Выпадающее меню для 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 :

 'Main Menu', 'container_id' => 'cssmenu', 'walker' => new CSS_Menu_Walker() )); ?>

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

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

Добавление CSS

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

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

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

#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a

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

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

#cssmenu < height: 37px; display: block; padding: 0; margin: 0; border: 1px solid; border-radius: 5px; width: auto; border-color: #080808; >#cssmenu, #cssmenu > ul > li > ul > li a:hover < background: #3c3c3c; background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: linear-gradient(top, #3c3c3c 0%, #222222 100%); >#cssmenu > ul < list-style: inside none; padding: 0; margin: 0; >#cssmenu > ul > li < list-style: inside none; padding: 0; margin: 0; float: left; display: block; position: relative; >#cssmenu > ul > li > a < outline: none; display: block; position: relative; padding: 12px 20px; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); font-weight: bold; font-size: 13px; font-family: Arial, Helvetica, sans-serif; border-right: 1px solid #080808; color: #ffffff; >#cssmenu > ul > li > a:hover < background: #080808; color: #ffffff; >#cssmenu > ul > li:first-child > a < border-radius: 5px 0 0 5px; >#cssmenu > ul > li > a:after

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

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

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

#cssmenu ul li.has-sub:hover > a:after < top: 0; bottom: 0; >#cssmenu > ul > li.has-sub > a:before < content: ''; position: absolute; top: 18px; right: 6px; border: 5px solid transparent; border-top: 5px solid #ffffff; >#cssmenu > ul > li.has-sub:hover > a:before < top: 19px; >#cssmenu ul li.has-sub:hover > a < background: #3f3f3f; border-color: #3f3f3f; padding-bottom: 13px; padding-top: 13px; top: -1px; z-index: 999; >#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div < display: block; >#cssmenu ul li.has-sub > a:hover < background: #3f3f3f; border-color: #3f3f3f; >#cssmenu ul li > ul, #cssmenu ul li > div < display: none; width: auto; position: absolute; top: 38px; padding: 10px 0; background: #3f3f3f; border-radius: 0 0 5px 5px; z-index: 999; >#cssmenu ul li > ul < width: 200px; >#cssmenu ul li > ul li < display: block; list-style: inside none; padding: 0; margin: 0; position: relative; >#cssmenu ul li > ul li a < outline: none; display: block; position: relative; margin: 0; padding: 8px 20px; font: 10pt Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); >#cssmenu ul ul a:hover < color: #ffffff; >#cssmenu > ul > li.has-sub > a:hover:before

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

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

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

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

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

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

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

Источник

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

‎Добавьте пользовательский класс Walker в functions.php‎

Прежде чем мы сможем распечатать наше меню в файле темы WordPress, нам нужно добавить‎ WordPress Walker Class в ваш functions.php файл. ‎Этот фрагмент кода очистит HTML-вывод нашего меню, чтобы нам было легче создавать стили CSS. Просто скопируйте и вставьте код Walker в свой‎ functions.php ‎файл, который должен находиться прямо в папке темы‎. Если файла functions.php нет, создайте и вставьте в него код Walker Class.

Добавьте меню в файлы шаблона темы

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

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

 'Main Menu', 'container_id' => 'cssmenu', 'walker' => new CSS_Menu_Walker() )); ?>

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

Если вы все сделали правильно до этого момента, вы должны увидеть нестилированный HTML-список, отображаемый в вашей теме. Если меню не распечатано, дважды проверьте предыдущие шаги.‎

‎Добавление CSS‎

Теперь пришло время добавить стили в наше меню и увидеть плоды нашего труда. Откройте CSS-файл для вашей темы. Он может находиться в папке с именем‎ css/styles.css ‎или просто файл в корневом каталоге темы.

Вы можете скопировать и вставить все CSS ниже в CSS-файл вашей темы сразу, если хотите. Я буду разбивать CSS на части, чтобы объяснить его легче.‎
‎Обратите внимание, что мы используем тот же идентификатор, который мы указали в‎ wp_nav_menu() function, #cssmenu .

Этот первый бит CSS – это просто несколько простых сбросов, чтобы убедиться, что каждый браузер начинается с одной и той же точки.‎

#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a

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

Еще один стиль, который стоит отметить, – это использование‎ :after ‎псевдокласс. Это позволяет нам добавлять слабые цвета границ вокруг каждого пункта меню, которые придают дизайну некоторую глубину.‎

Далее нам нужно стилизовать подменю. Мы хотим, чтобы они были скрыты по умолчанию, а затем показаны, когда пользователь наводит курсор на родительский элемент. Это может быть достигнуто с помощью чистого CSS.‎

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

#cssmenu ul li.has-sub:hover > a:after < top: 0; bottom: 0; >#cssmenu > ul > li.has-sub > a:before < content: ''; position: absolute; top: 18px; right: 6px; border: 5px solid transparent; border-top: 5px solid #ffffff; >#cssmenu > ul > li.has-sub:hover > a:before < top: 19px; >#cssmenu ul li.has-sub:hover > a < background: #3f3f3f; border-color: #3f3f3f; padding-bottom: 13px; padding-top: 13px; top: -1px; z-index: 999; >#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div < display: block; >#cssmenu ul li.has-sub > a:hover < background: #3f3f3f; border-color: #3f3f3f; >#cssmenu ul li > ul, #cssmenu ul li > div < display: none; width: auto; position: absolute; top: 38px; padding: 10px 0; background: #3f3f3f; border-radius: 0 0 5px 5px; z-index: 999; >#cssmenu ul li > ul < width: 200px; >#cssmenu ul li > ul li < display: block; list-style: inside none; padding: 0; margin: 0; position: relative; >#cssmenu ul li > ul li a < outline: none; display: block; position: relative; margin: 0; padding: 8px 20px; font: 10pt Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); >#cssmenu ul ul a:hover < color: #ffffff; >#cssmenu > ul > li.has-sub > a:hover:before

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

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

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

Возьмите исходные файлы здесь (zip-файл содержит functions.php and styles.css):‎
‎Исходные файлы: Выпадающее меню WordPress‎‎ ‎ ‎ВЕРСИЯ 1.0 (2 КБ ZIP)‎

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

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

8 марта, 2022 16 января, 2023 Валерий

Источник