Домой / WordPress / Создание индикатора выпадающего меню в WordPress
Создание индикатора выпадающего меню в WordPress

Создание индикатора выпадающего меню в WordPress

Приветствую Вас, друзья! Сегодня мы поговорим о меню, а именно о том, как создать индикатор наличия выпадающего меню. Но сперва давайте вспомним, какие бывают индикаторы в меню и зачем они нужны.

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

У меня на сайте они также есть:

Создание индикатора выпадающего меню в WordPress

В большинстве шаблонов для сайтов 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.

Если у Вас что-то не получилось или остались вопросы, пишите в комментариях.


Приветствую Вас, друзья! Сегодня мы поговорим о меню, а именно о том, как создать индикатор наличия выпадающего меню. Но сперва давайте вспомним, какие бывают индикаторы в меню и зачем они нужны. Обычно в роли индикаторов выпадающего меню используют стрелочку вниз, которая дает возможность понять посетителю вашего сайта о наличии подменю в определенном пункте меню. У меня на сайте они также есть: В большинстве шаблонов для сайтов WordPress индикаторы присутствуют, но если на Вашем сайте их нету, тогда с помощью данного урока Вы легко сможете добавить индикаторы в меню. Как добавить индикатор выпадающего меню в WordPress Если Вы хотите сделать стандартный индикатор, по аналогии как у меня…

Обзор

Проголосуйте за урок

Рейтинг: 4.85 ( 6 голосов )
100

2 комментария

  1. Благодарю, помогли!

    Добавьте еще 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 { … }

  2. А куда именно в css нужно вставить код для стрелки? Тема TwentyTen.

Оставить комментарий

Ваш email не будет опубликован.

*