текущий-меню-элемент класс в CSS

Содержание

Вопрос или проблема
Ответ или решение
Использование класса .current-menu-item в CSS
Понимание проблемы
Решения проблемы
Заключение

Вопрос или проблема

Я создал одну главную страницу (Главная страница) и много пользовательских ссылок в wp-admin. Все пользовательские ссылки связаны с секциями главной страницы.

Пример: Пользовательская ссылка О нас имеет URL = #section1, и в моем коде я связал её с:

<div id="section1"> Текст </div>

В моем CSS я использовал .current-menu-item для выделения нажатой ссылки в меню:

.site-header div.nav-wrap nav ul li.current-menu-item a:link,
.site-header div.nav-wrap nav ul li.current-menu-item a:visited {

color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;

}

Когда я прыгаю на section1, выделяется только ссылка Главная страница, а не ссылка О нас. Как я могу это исправить, чтобы ссылка О нас выделялась?

Если вы хотите использовать разные стили для активных элементов меню на одностраничном сайте или автоматически выбирать правильные элементы меню, вам следует использовать плагин jQuery, такой как этот.

Ответ или решение

В веб-разработке класс .current-menu-item играет важную роль в выделении текущего элемента меню, что существенно улучшает пользовательский интерфейс и навигацию по сайту. В вашем случае, задача стоит в том, чтобы правильно выделять ссылки меню, такие как "About Us", когда пользователь переходит к соответствующему разделу на одной странице.

Понимание проблемы

Вы создали главную страницу и ссылки на секции внутри нее. При клике на ссылку "About Us", вы ожидаете, что она будет выделена, однако вместо этого выделяется только главная страница. Эта проблема вызвана тем, что WordPress по умолчанию не понимает, что ссылки с якорями (например, #section1) должны менять класс текущего элемента меню. Это происходит потому, что при переходе по таким ссылкам не осуществляется полная перезагрузка страницы, а значит, не изменяется состояние меню.

Решения проблемы

Использование jQuery:
Первое решение—это применение библиотеки jQuery. Существует готовое решение в виде плагина jQuery One Page Nav, который позволяет выделять активные элементы на одностраничных сайтах. Плагин отслеживает прокрутку страницы и автоматически добавляет класс .current-menu-item к соответствующему элементу меню, когда секция достигается.

Пример использования:
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.onepage-nav.min.js"></script>
<script>
   $(document).ready(function() {
       $('.nav-wrap nav ul').onePageNav({
           currentClass: "current-menu-item",
           changeHash: true,
           scrollSpeed: 750,
           scrollThreshold: 0.5,
           easing: "swing"
       });
   });
</script>
```

CSS и JavaScript:
Если вы не хотите использовать сторонние плагины, вы можете написать кастомный скрипт на JavaScript, который будет контролировать изменяющийся хэш URL и добавлять класс .current-menu-item к соответствующему элементу меню.

Пример простого JavaScript:

document.addEventListener('DOMContentLoaded', function() {
   const menuItems = document.querySelectorAll('.nav-wrap nav ul li a');
   const sections = document.querySelectorAll('div[id^="section"]');

   window.addEventListener('scroll', function() {
       let scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

       sections.forEach(section => {
           const sectionTop = section.offsetTop;
           const sectionHeight = section.offsetHeight;

           if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
               const id = section.getAttribute('id');
               menuItems.forEach(item => {
                   item.parentElement.classList.remove('current-menu-item');
                   if (item.getAttribute('href') === `#${id}`) {
                       item.parentElement.classList.add('current-menu-item');
                   }
               });
           }
       });
   });
});

Поддержка CSS:
Ваш CSS стиль для класса .current-menu-item уже корректен, и дополнительно его не требуется изменять, если JavaScript правильно добавляет и удаляет этот класс.

Заключение

Использование класса .current-menu-item для выделения активных ссылок в меню — это хороший способ улучшить удобство навигации на сайте. С применением jQuery или собственного JavaScript-кода можно добиться необходимого функционала для выделения элементов меню в зависимости от места на странице. Применение таких подходов не только улучшает пользовательский интерфейс, но и повышает общую интерактивность вашего сайта, что, в свою очередь, может сказаться на его SEO-оптимизации.