Приветствую Вас, друзья! Сегодня мы поговорим о меню, а именно о том, как создать индикатор наличия выпадающего меню. Но сперва давайте вспомним, какие бывают индикаторы в меню и зачем они нужны.
Обычно в роли индикаторов выпадающего меню используют стрелочку вниз, которая дает возможность понять посетителю вашего сайта о наличии подменю в определенном пункте меню.
У меня на сайте они также есть:
В большинстве шаблонов для сайтов WordPress индикаторы присутствуют, но если на Вашем сайте их нету, тогда с помощью данного урока Вы легко сможете добавить индикаторы в меню.
Как добавить индикатор выпадающего меню в WordPress
Если Вы хотите сделать стандартный индикатор, по аналогии как у меня на сайте, добавьте в CSS стили следующий код:
.nav-menu li > a:after { color: #888; content: ' ▾'; } .nav-menu li > a:hover:after { color: #444; content: ' ▾'; } .nav-menu li > a:only-child:after { content: ''; }
Теперь на всех пунктах меню у которых есть подменю, с правой стороны будут отображаться стрелочки вниз. Для того чтобы увеличить или уменьшить размер индикатора добавьте CSS свойство font-size. Увеличивая или уменьшая значение font-size Вы сможете подобрать оптимальный размер индикатора для меню.
.nav-menu li > a:after { color: #888; content: ' ▾'; font-size: 24px; }
Добавление изображений в индикатор выпадающего меню
В случае, если Вы хотите добавить свой собственный индикатор в меню — замените CSS свойства content, добавив в них ссылку на изображение индикатора:
content: url(https://wp-lessons.com/wp-content/uploads/2015/04/arrow_down.png);
Заметьте, что используя свой собственный индикатор у Вас не будет возможности изменить его размер с помощью свойства font-size. В этом случае поможет лучше всего графический редактор 😉
Вот таким простым и не хитрым способом можно создать индикатор выпадающего меню на сайте WordPress.
Если у Вас что-то не получилось или остались вопросы, пишите в комментариях.
Благодарю, помогли!
Добавьте еще css коды стрелочки, а то пришлось выискивать
content: «\00a0\25BC»;
Где 00a0 = пробел, а 25BC = код стрелочки вниз.
Коды символов:
web.cofp.ru/vse-o-sajtakh/sozdanie-sajta/verstka/110-special-chars
А еще код для суб меню со стрелочкой вправо:
.nav-menu li ul li > a:after {
color: #888;
content: «\00a0\25BA»;
}
А зачем Ваш код для? Можно его и не добавлять, если в теме на єто свойство ничего не поставлено.
.nav-menu li > a:hover:after { … }
А куда именно в css нужно вставить код для стрелки? Тема TwentyTen.
СУПЕР!! Перерыл пол инета и тут нашел решение , вы лучшие 🙂
Спасибо тебе добрый человек))). Два года не знал как сделать такую простую вещь. Решение знал как добавить на все пункты меню, но до этого не догадался .nav-menu li > a:only-child:after { content: »;} ))))
Создание индикатора выпадающего меню в WordPress для разделителя меню без активной ссылки
.top-navv a:not([href]):not([tabindex]):after {
content: «\25BE «;
padding-left: 5px;
font-size: 18px;
z-index: 10000;
}
Может кому то еще пригодится
Смена цвета активной ссылки
.top-navv a:not([href]):not([tabindex]) {
color: #fff;
text-decoration: none;
}
.top-navv a:not([href]):not([tabindex]):hover {
color: #0459A4;
text-decoration: none;
}