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

1. Использование классов CSS.
   Одним из распространенных подходов является назначение определенного класса CSS активному пункту меню. Вы можете добавить класс динамически к соответствующему элементу HTML текущей страницы. Вот пример:

<ul class="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html" class="active">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

.active {
  font-weight: bold;
  color: #ff0000;
}

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

2. Использование JavaScript.
   JavaScript можно использовать для динамической установки активного состояния пункта меню на основе URL-адреса текущей страницы. Вот пример использования простого JavaScript:

<ul class="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

document.addEventListener("DOMContentLoaded", function() {
  var currentUrl = window.location.href;
  var menuItems = document.querySelectorAll(".menu a");
  menuItems.forEach(function(item) {
    if (item.href === currentUrl) {
      item.classList.add("active");
    }
  });
});

В этом примере код JavaScript сопоставляет текущий URL-адрес с атрибутом href пункта меню и соответствующим образом добавляет «активный» класс.

3. Подсветка на стороне сервера.
   Если вы используете серверный язык, например PHP, вы можете динамически генерировать меню навигации и применять активное состояние непосредственно на сервере. Вот пример использования PHP:

<ul class="menu">
  <li><a href="home.php" <?php if ($currentPage === "home.php") echo 'class="active"'; ?>>Home</a></li>
  <li><a href="about.php" <?php if ($currentPage === "about.php") echo 'class="active"'; ?>>About</a></li>
  <li><a href="services.php" <?php if ($currentPage === "services.php") echo 'class="active"'; ?>>Services</a></li>
  <li><a href="contact.php" <?php if ($currentPage === "contact.php") echo 'class="active"'; ?>>Contact</a></li>
</ul>

В этом примере переменная $currentPageсодержит имя файла текущей страницы. Код PHP проверяет, соответствует ли текущая страница каждому пункту меню, и соответствующим образом добавляет «активный» класс.

Выделение текущей страницы как активного пункта меню важно для улучшения пользовательского опыта. В этой статье мы рассмотрели три эффективных метода с использованием классов CSS, JavaScript и подсветки на стороне сервера. Выберите метод, который лучше всего подходит для вашего проекта, и внедрите его, чтобы улучшить навигацию на вашем сайте.