Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

Как выделить активный пункт меню

Здравствуйте! Сейчас расскажу как выделить активный пункт меню, то есть страничку на которой сейчас находимся. Давно хотел сделать такую штуку на своем сайте но никак руки не доходили. И вот настал тот час.

Если меню выводится с помощью  функции wp_nav_menu() то сделать активный пункт меню очень просто, нужно проверить его в браузере ( клавиша F12 ) и найти класс current-menu-item

И дальше его стилизировать в css:

Если же меню сделано через html код то для етого нужно использовать jQuery. У меня меню реализовано вот так:

Главный id menu, вот с ним и будем работать. Нашел вот такой скрипт:

В нем есть основной div menu для меню и активный класс active (для активного пункта меню). Вставляем код в header.php между тегами <head></head>. В файле style.css создаем стиль для класса active, как будет отображаться активный пункт меню.  Вот и все. У меня вот так в css:

  • http://madmasters.com.ua Елена Волошина

    НЕРЕАЛЬНОЕ СПАСИБИЩЕ!!!! ВСЕ ЗАРАБОТАЛО МГНОВЕННО!!

  • Azamat

    подскажите код, если у меня такая структура:

    страница 1

    страница 2

    страница 3

  • Vyachaslau Kazakou

    Cпасибо, помогло)))