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

Метод 1: CSS-переход
Один из способов создать призрачную панель навигации — использовать CSS-переходы. Вот пример:

<nav class="navbar">
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<style>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.navbar:hover {
  background-color: #fff; /* Change to desired background color */
}
.nav-links {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}
.nav-links li {
  margin-right: 20px;
}
.nav-links li a {
  color: #000; /* Change to desired text color */
  text-decoration: none;
}
</style>

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

Метод 2: событие прокрутки JavaScript
Другой подход к созданию призрачной панели навигации — использование JavaScript для обнаружения событий прокрутки и переключения видимости панели навигации. Вот пример:

<nav id="navbar" class="navbar">
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<style>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease;
  opacity: 0;
}
.navbar.show {
  opacity: 1;
  background-color: #fff; /* Change to desired background color */
}
.nav-links {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}
.nav-links li {
  margin-right: 20px;
}
.nav-links li a {
  color: #000; /* Change to desired text color */
  text-decoration: none;
}
</style>
<script>
window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  if (window.scrollY > 100) {
    navbar.classList.add('show');
  } else {
    navbar.classList.remove('show');
  }
});
</script>

В этом методе мы прикрепляем прослушиватель событий прокрутки к объекту окна. Когда пользователь прокручивает страницу вниз более чем на 100 пикселей, мы добавляем класс showк панели навигации, что делает ее видимой с нужным цветом фона. В противном случае панель навигации останется скрытой.

Дополнительные методы:

• Метод 3: фиксированное позиционирование CSS
• Метод 4: API Intersection Observer

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