Css menu для 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 вручную. Как только вы найдете конфликтующие стили, удалите их.

Источник

How to Style a Custom CSS WordPress Menu

When it comes to creating great user experiences, your navigation menu plays a crucial role. It helps visitors see and access different areas of your website.

As such, it’s important for your navigation menu to look and behave in the way that you want it to. If you have a WordPress.com site on the Premium or plugin-enabled plan, you have the ability to add custom CSS. Here’s how you can create a custom menu using CSS so visitors can navigate your site with ease.

If editing your website’s CSS feels a bit too technical for your preferences, there are other ways to make basic customizations to site navigation.

Watch the video below to find out how to customize menus on a WordPress.com website without editing code:

Look for your theme’s CSS ID or the class that your theme uses for the container that surrounds your navigation menu. This is the code you need to use to modify the background color. In one example, the code looks like this:

In the screenshot below, notice that the background color of the menu is now dark blue.

Change font colors

Changing your menu’s background color can make your menu items harder to read. You’ll want to adjust the font color of your menu items and links to ensure that visitors can still see them. You can do so with the following code:

.main-navigation li.menu-item a

Style a single menu item

If you have a page that you want to drive visitors to (such as a “Hire Me” page), you can style it differently to make it stand out.

First, add a CSS class to the menu item that you want to style. Navigate to the Customize section, click Menus, and then click on the cogwheel icon and check the box next to CSS Classes.

Publish the changes and then select the menu that you’re styling. Click the menu item you want to style and, in the CSS Class, enter a short name like “.custom” or “.cta.” Publish the changes and then go back to the CSS section within the Customizer.

From your website’s page, right-click on the menu item that you want to change and use the Inspect tool to locate the code. You can then use the following code to modify its appearance:

Add hover effects to menu items

You can also add hover effects to your custom CSS WordPress menu items. To do so, use the following code:

In this example, the appearance of the custom link when it’s hovered over is being altered, but you can also use it for any other menu item by replacing the “.custom” class with the following:

Make your navigation menu pop with custom CSS

Proper website navigation will ensure that your visitors have an easier time locating your content and services, which makes them more likely to stay on your site for longer periods of time. Use the tips above to distinguish your menus and provide the best possible user experiences.

Источник