Как сохранить выделение элемента меню при переходе на другую страницу?

Как мне сохранить активный "фокус" на меню при переходе на другую страницу? Какая технология лучше всего подходит для этого - PHP-сессии или JavaScript? Где я могу найти информацию об этом с примерами? Спасибо заранее!
  • 4 октября 2023 г. 3:37
Ответы на вопрос 2
Сохранение состояния активного элемента меню при переходе на другую страницу можно реализовать с помощью JavaScript. 
Одним из способов является добавление класса или стилизации к активному элементу меню на каждой странице, исходя из текущего адреса страницы. Например, с использованием jQuery:

1. Включите библиотеку jQuery на каждой странице:
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

2. Добавьте код для подсветки активного элемента меню в зависимости от текущего адреса страницы:
```javascript
$(document).ready(function() {

  var url = window.location.href;
  $('ul.navbar li a[href="' + url + '"]').addClass('active');

});
```

3. Добавьте стилизацию активного элемента меню в CSS:
```css
ul.navbar li a.active {
  background-color: #e6e6e6;
}
```

Таким образом, при загрузке каждой страницы, скрипт будет проверять текущий адрес и добавлять класс "active" к соответствующему элементу меню.

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

Пример кода на PHP для сохранения активного элемента меню:
```php
<?php
session_start();

$current_page = $_SERVER['REQUEST_URI'];
$_SESSION['active_url'] = $current_page;
?>
```

Затем, на странице с меню, можно добавить проверку переменной сессии и добавить класс или стиль к активному элементу:
```html
<ul class="navbar">
  <li><a href="index.php" <?php if ($_SESSION['active_url'] == '/index.php') echo 'class="active"'; ?>>Главная</a></li>
  <li><a href="about.php" <?php if ($_SESSION['active_url'] == '/about.php') echo 'class="active"'; ?>>О нас</a></li>
  <li><a href="contact.php" <?php if ($_SESSION['active_url'] == '/contact.php') echo 'class="active"'; ?>>Контакты</a></li>
</ul>
```

Не забудьте, что вы должны вызвать `session_start()` в начале каждой страницы перед доступом к переменной сессии.

Вы можете найти больше информации о сохранении состояния активного элемента меню в документации по JavaScript, jQuery и PHP. Все три технологии имеют обширные ресурсы и примеры, которые могут помочь вам разобраться в деталях.
Вариант 1:
- Напишите функцию на JS, которая будет искать нужную ссылку в меню, основываясь на подстроке текущего URL и присваивать найденному элементу класс активного элемента (или контейнеру ссылки).
- Также не забудьте применить класс активного элемента к ссылкам первого уровня меню, если у вас есть многоуровневое меню.

Вариант 2:
- Реализуйте простой роутинг URL во входном скрипте index.php, чтобы вы могли точно получить путь к странице из компонентов адреса.
- Сформируйте меню динамически из сохраненной структуры, используя роутер и статичную структуру меню.
- Используйте рекурсивную функцию, чтобы преобразовать структуру меню в верстку меню на сайте, присваивая класс текущего элемента в зависимости от пути страницы.
Похожие вопросы