Css menu for 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 Валерий

Источник

How to Style WordPress Navigation Menus

A website navigation system is one of the most important features of every website, regardless of the platform it was built on. Navigation menus, in particular, are a key component of that system and one that has the biggest impact on visitors. So, making sure to style your WordPress navigation menus can be very beneficial for your site.

In short, navigation menus represent a structure of the website’s most valuable internal links. They provide a quick and efficient way for visitors to explore your content. These links could lead to your pages, posts, categories, or some other custom links of your choosing. Luckily, adding all of these is easy to accomplish in WordPress thanks to its intuitive menu creation and overview section.

However, once you’ve created a WordPress navigation menu, you might need to invest additional effort to style it. With proper styling and typography, navigation menus can become real attention grabbers and provide your visitors with a smooth, polished user experience. This could keep them on your site longer and reduce your bounce rate. In this article, we’ll show you how to style WordPress navigation menus to make the most of this feature. If you’d like to skip to any specific part of the article, just click on one of the links below:

Источник