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

Начнем с HTML-структуры

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

«`html

<!DOCTYPE html>

<html>

<head>

<link rel=»stylesheet» type=»text/css» href=»styles.css»>

</head>

<body>

<nav class=»navbar»>

<div class=»logo»>Ваш логотип</div>

<ul class=»nav-links»>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>О нас</a></li>

<li><a href=»#»>Услуги</a></li>

<li><a href=»#»>Контакты</a></li>

</ul>

<div class=»burger» onclick=»toggleMenu()»>

<div class=»line1″></div>

<div class=»line2″></div>

<div class=»line3″></div>

</div>

</nav>

<div class=»content»>

<!— Ваш контент здесь —>

</div>

<script src=»script.js»></script>

</body>

</html>

«`

Здесь мы создали структуру HTML с навигационной панелью, логотипом, списком ссылок и кнопкой бургера. Важно обратить внимание на классы и id, которые мы будем использовать в CSS и JavaScript.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Стилизация с помощью CSS

Далее мы приступим к стилизации нашей навигационной панели с помощью CSS. Создадим файл `styles.css` и добавим следующий код:

«`css

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #333;

color: #fff;

padding: 10px 20px;

}

.logo {

font-size: 24px;

}

.nav-links {

list-style: none;

display: flex;

}

.nav-links li {

margin-right: 20px;

}

.nav-links a {

text-decoration: none;

color: #fff;

}

.burger {

display: none;

flex-direction: column;

cursor: pointer;

}

.line1, .line2, .line3 {

width: 25px;

height: 3px;

background-color: #fff;

margin: 3px 0;

}

«`

В этом CSS-коде мы определили стили для нашей навигационной панели, логотипа, ссылок и кнопки бургера. Опция `display: none;` для класса `.burger` скрывает кнопку бургера на начальных этапах.

Добавление JavaScript для адаптивности

Теперь создадим файл `script.js` и добавим JavaScript-код для реализации адаптивной панели навигации:

«`javascript

function toggleMenu() {

const navLinks = document.querySelector(‘.nav-links’);

const burger = document.querySelector(‘.burger’);

navLinks.classList.toggle(‘active’);

burger.classList.toggle(‘active’);

}

function checkWindowSize() {

const navLinks = document.querySelector(‘.nav-links’);

const burger = document.querySelector(‘.burger’);

if (window.innerWidth <= 768) {

navLinks.style.display = ‘none’;

burger.style.display = ‘flex’;

} else {

navLinks.style.display = ‘flex’;

burger.style.display = ‘none’;

}

}

window.onload = checkWindowSize;

window.onresize = checkWindowSize;

«`

Этот код добавляет две функции: `toggleMenu` для открытия и закрытия меню при клике на кнопку бургера и `checkWindowSize` для автоматической адаптации навигационной панели в зависимости от ширины экрана.

Доработка CSS для адаптивности

Чтобы обеспечить адаптивность, доработаем CSS, добавив следующий код в `styles.css`:

«`css

@media screen and (max-width: 768px) {

.nav-links {

display: none;

flex-direction: column;

position: absolute;

top: 60px;

left: 0;

width: 100%;

background-color: #333;

z-index: 1;

}

.nav-links.active {

display: flex;

}

.burger {

display: flex;

}

}

«`

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

Заключение

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

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно