Позволяет изменять набор CSS классов у пункта меню.
Использование
add_filter("nav_menu_css_class", "filter_function_name_8591", 10, 4); function filter_function_name_8591($classes, $item, $args, $depth){ // filter... return $classes; } $classes(массив)Классы CSS, которые применяются к элементу
Array( => menu-item => menu-item-type-post_type => menu-item-object-page => menu-item-265) $item(WP_Post)
Объект текущего пункта меню. Пример:
WP_Post Object ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Обратная связь => => publish => closed => closed => => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/?p=265 => 1 => nav_menu_item => => 0 => raw => 265 => 0 => 214 => page => post_type => Страница => http://wp-test.ru/post-99 => Обратная связь => => => => Array ( => => menu-item => menu-item-type-post_type => menu-item-object-page) => => => =>) $args(stdClass)
Объект с аргументами из функции wp_nav_menu() . Пример:
StdClass Object ( => WP_Term Object ( => 21 => Моё первое меню => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => raw) => div => => => primary-menu => => 1 => wp_page_menu => => => => => => preserve => 0 => => primary) $depth(число) Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.
Примеры
#1 Добавим CSS класс только определенному пункту меню
Пусть нам нужно добавить к пункту меню "Обратная связь" (id=265) дополнительный CSS класс, причем только если этот пункт выводится в меню, прикреплённом к области меню primary , тогда:
Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if($item->ID === 265 && $args->theme_location === "primary"){ $classes = "special-css-class"; } return $classes; }
Получим в вёрстке:
#1 Удалим CSS классы у всех пунктов меню
Удалим все CSS классы у всех пунктов меню сайта.
Add_filter("nav_menu_css_class", "__return_empty_array");
Получим вёрстку:
Также, как и в первом примере, можно использовать условия. Удалим у всех пунктов меню CSS классы, а пунктам меню из области меню primary добавим свой css класс:
Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if ($args->theme_location === "primary") { $classes = [ "my-css" ]; } else { $classes = ; } return $classes; }
Получим вёрстку:
Заметки
- C версии 4.1.0 был добавлен параметр $depth .
Список изменений
| С версии 3.0.0 | Введена. |
| С версии 4.1.0 | The $depth parameter was added. |
Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.
Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.
Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.
К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:
В стилевом оформление для меню я указал обязательные свойства с нужными значениями:
Обязательные параметры и значения CSS
- margin: 0; - убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
- list-style-type: none; - убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.
Вот таким образом делается меню на html страницах, и теперь перейдём к созданию горизонтального меню и рассмотрим всё на примерах.
Как сделать горизонтальное меню на CSS
Для отображения горизонтального меню применяя список, нам достаточно прописать в вышеуказанный код всего один параметр display: inline; , чтобы пункты меню выровнялись в одну строку и шли друг за другом по горизонтали. А так же добавим отступы между пунктами меню с помощью margin .
И выглядеть это будет так:
Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.
Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color (добавим фон для пункта меню), и изменим вид ссылки.
Отображаться горизонтальное меню уже будет таким образом:
Так как горизонтальное меню в большинстве случаях прописывают в шапке сайта, то и я в примере добавил в меню фон, который вы измените под свой цвет шапки.
И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.
Кстати вы можете так же воспользоваться , которые вы можете там воочию посмотреть и бесплатно скачать.
Как сделать вертикальное меню на CSS
Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li {... параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.
И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.
Давайте рассмотрим вертикальное меню CSS на примере:
Вот так вертикальное меню отобразится на странице:
Будьте внимательны!
Как сделать выпадающее меню на CSS
Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.
Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li
, где находится эта ссылка, прописать position: relative;
, а для выпадающего меню position: absolute;
Давайте напишем html код для выпадающего меню на CSS.
Посмотрите, как будет выглядеть на странице выпадающее меню на CSS.
Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).
Посмотрите!
Как сделав всего 3 изменения
в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.
Изменения в CSS для выпадающего меню
- Заменить в .saitbar - width: 240px; на width: 100%;
- Заменить в .menu-4 li - display: block; на display:inline-block;
- Заменить в .menu-4 ul.podmenu - top: 0; на top: 34px;
- Заменить в .menu-4 ul.podmenu - left: 214px; на left: 7px;
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
4 482
В этой статье я расскажу, как создать меню навигации WordPress. Используя простой инструмент drag & drop вы сделаете красивое выпадающее меню на вашем сайте.
Меню навигации WordPress
Зачем нужно меню? Оно позволяет представить структуру вашего сайта пользователям — помогает им просматривать разделы и быстро находить нужную информацию.
Меню может располагаться вверху/внизу и справа/слева на странице сайта.
Почти все темы WordPress содержат хотя бы один тип расположения меню.
Создание меню WordPress
Вы можете добавить меню из панели администратора WordPress — Внешний вид — Меню.
На экране появится новое окно «Создать меню», состоящее из двух областей. В левой области находятся ваши страницы, произвольные ссылки и рубрики. А в правой – настраиваемые пункты меню.
Давайте создадим ваше первое меню.
Укажите имя для вашего меню, например. «Мое первое меню», а затем нажмите кнопку «Создать меню».
Перед вами появятся настройки меню:
Как вы можете заметить, тема сайта Azbuka WordPress предлагает 3 варианта расположения меню: main, secondary, footer.
Названия и местоположения меню зависит от выбранной темы и могут отличаться.
Затем выберите страницы, которые вы хотите добавить — отметьте страницы, перечисленные в левой области, и нажмите «Добавить в меню».
Затем выберите местоположение вашего меню и сохраните.
Можете попробовать разное расположение, чтобы посмотреть, как оно будет выглядеть готовым.
Размещение элементов меню
Вы заметили, что каждый добавленный пункт меню стоит в том порядке, в котором вы его добавили. Например, страница «Обо мне» отображается в конце, а «Товары» — в начале.
Не беспокойтесь, пункты меню можно перетаскивать мышкой и выстраивать в нужном вам порядке.
Так вы можете создавать необходимое количество меню для разных областей сайта.
Создание выпадающего меню навигации WordPress
Выпадающее меню является навигационным меню. С родительскими и дочерними элементами.
Когда пользователь наводит мышку на родительский элемент меню, то все остальные, дочерние, элементы плавно появляются один за другим под родительским.
С помощью выпадающего меню вы можете создать правильно структурированную навигационную систему.
Теперь добавим пункт подменю для вашего нового меню.
В структуре перетащите элемент чуть ниже родительского элемента, затем слегка перетащите элемент вправо. Вы заметите, что он автоматически станет элементом подменю.
Так вы можете создать несколько уровней подменю. Но, к сожалению, не все темы поддерживают создание таких многоуровневых меню — большинство дают возможность сделать только 2 уровня.
Добавление рубрик в меню
Для создания выпадающего меню в блоге используются рубрики. И добавляются по такому же принципу, что и страницы. Разверните вкладку «Рубрики», выберите нужные и добавьте в меню.
Вы заметите, что рубрики будут отображаться в виде пунктов меню. Как и в случае со страницами, вы можете перетаскивать рубрики мышкой, чтобы выставить их в нужном порядке.
На примере ниже я сделала так, что все рубрики стали дочерними элементами страницы с блогом.
Добавление произвольных ссылок в меню навигации WordPress
Редактирование пункта меню
Когда вы добавляете страницы или рубрику, WordPress автоматически использует название страницы или название рубрики в качестве текста ссылки.
Это не означает, что вы не можете его изменить.
Разверните элемент и отредактируйте так, как вам нужно.
Здесь можно изменить заголовок, текст ссылки и добавить атрибут title к ссылке. Сохраните меню, чтобы не потерять все изменения.
Удаление из меню
Также разверните элемент меню и внизу вы увидите красный текст «Удалить».
Области размещения навигационных меню
Каждая тема предлагает свои виды расположения навигационного меню.
В теме этого сайта, что я показывала в примерах, есть 3 вида расположения меню. В вашей теме их может больше или меньше. И называться они, конечно, могут по-разному.
Добавление навигационного меню в сайдбаре
Помимо стандартных областей вы можете добавлять меню в сайдбар и другие области с виджетами.
В админке выберите пункт «Внешний вид» — «Виджеты» и добавьте виджет «Произвольное меню» в сайдбар.
Затем вам нужно озаглавить виджет и выбрать одно из своих настроенных меню из списка. Нажмите кнопку сохранения.
Теперь перейдите на сайт и проверьте, как отображается меню в сайдбаре.
Что касается социальных кнопок в меню, некоторые темы предлагают встроенные кнопки социальных сетей.
Если их нет в вашей теме, вы можете установить плагин, например, Menu Social Icons , чтобы добавить кнопки самостоятельно.
Вам может быть интересно:
Если у вас есть вопросы — пишите в комментариях.
И подписывайтесь на нас в
Из этого урока вы узнаете как создать адаптивное навигационное меню с иконками , используя библиотеку Font Awesome и палитру цветов, на чистом CSS .
Демонстрация меню .
Подключение Font Awesome
Подключить можно двумя способами: скачать архив или вставить ссылку между тегами . Мы воспользуемся CDN ссылкой.
Все, иконочный шрифт подключен.
Поиск и вызов иконки на сайте
Первым пунктом меню у нас будет главная страница, вбиваем в поиске слово home и выбираем подходящую нам иконку.
Копируем код, как вы видите на скриншоте ниже и вставляем в нужном нам месте на HTML странице. Таким образом находим иконки для всех пунктов меню.
HTML разметка
Создадим блок , это специальный тег, предназначенный для ссылок в навигационном меню. Внутри блока вы видите четыре ссылки с временными заглушками для будущих страниц. Внутри ссылки тег вызывает класс иконки и рядом с ним, мы прописали название пункта меню.
