Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
02 Июн 2023
2 мин
194

Как создать сайт с использованием фиксированного навигационного меню

Узнайте, как создать сайт с фиксированным навигационным меню с помощью HTML, CSS и JavaScript, чтобы улучшить пользовательский опыт!

Фиксированное навигационное меню – это полезный элемент веб-дизайна, который позволяет пользователям легко перемещаться по сайту, не теряя контакт с основным меню. В этой статье мы рассмотрим, как создать сайт с использованием фиксированного навигационного меню, используя HTML, CSS и JavaScript. 😊

Шаг 1: Создание HTML-структуры

Прежде всего, создадим базовую HTML-структуру для нашего сайта. Вот пример простой структуры:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Фиксированное навигационное меню</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <!-- Здесь размещаем пункты меню -->
    </nav>
  </header>
  <main>
    <!-- Здесь размещаем основной контент сайта -->
  </main>
  <script src="scripts.js"></script>
</body>
</html>

Шаг 2: Создание стилей CSS для фиксированного меню

Теперь, когда у нас есть базовая HTML-структура, давайте добавим стили CSS для фиксированного навигационного меню. Создайте файл styles.css и добавьте следующие стили:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}

main {
  padding-top: 4rem;
}

Эти стили устанавливают фиксированное положение для нашего навигационного меню и добавляют простой дизайн.

Шаг 3: Добавление JavaScript для плавного скроллинга

Для более удобного пользовательского опыта, добавим плавный скроллинг при переходе по ссылкам в меню. Создайте файл scripts.js и добавьте следующий код:

document.querySelectorAll('nav a').forEach(link =&gt; {
  link.addEventListener('click', function (e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth'
    });
  });
});

Этот код обеспечивает плавную прокрутку страницы при переходе по ссылкам в меню.

🎉 Поздравляю! Теперь у вас есть сайт с фиксированным навигационным меню. Вы можете использовать этот пример для создания собственных сайтов с подобным функционалом. Не забудьте экспериментировать с дизайном и функциональностью для создания уникального сайта. Удачи вам в изучении веб-разработки!

Добавить комментарий