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

Зачем это нужно

Создание боковой панели, которая прикреплена к одной стороне экрана и изменяет свой размер в зависимости от контента и ширины окна браузера, задача для разработчиков. Она может значительно улучшить пользовательский опыт на сайте.

Ключевые понятия

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

Структура HTML

Для начала создадим простую структуру HTML-документа, включающую боковую панель и основной контент.

<!DOCTYPE html>

<html lang="ru">

<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>

<div class="sidebar">

<ul>

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

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

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

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

</ul>

</div>

<div class="content">

<h1>Основной Контент</h1>

<p>Здесь размещается основной контент страницы.</p>

</div>

<script src="scripts.js"></script>

</body>

</html>

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

Теперь добавим стили. Наша цель – сделать так, чтобы элемент оставался на месте при прокрутке страницы и изменяла свой размер в зависимости от ширины окна браузера.

/* styles.css */

body {

margin: 0;

font-family: Arial, sans-serif;

display: flex;

}

.sidebar {

position: fixed;

top: 0;

left: 0;

width: 250px;

height: 100%;

background-color: #333;

color: #fff;

padding-top: 20px;

transition: width 0.3s;

}

.sidebar ul {

list-style-type: none;

padding: 0;

}

.sidebar ul li {

padding: 10px;

text-align: center;

}

.sidebar ul li a {

color: #fff;

text-decoration: none;

display: block;

}

.sidebar ul li a:hover {

background-color: #575757;

}

.content {

margin-left: 250px;

padding: 20px;

width: 100%;

transition: margin-left 0.3s;

}

/* Адаптивный дизайн */

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

.sidebar {

width: 200px;

}

.content {

margin-left: 200px;

}

}

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

.sidebar {

width: 150px;

}

.content {

margin-left: 150px;

}

}

Добавление динамичности с помощью JavaScript

Для улучшения функциональности добавим JavaScript, который позволит пользователям скрывать и показывать ее по необходимости.

// scripts.js

document.addEventListener('DOMContentLoaded', function() {

const sidebar = document.querySelector('.sidebar');

const toggleButton = document.createElement('button');

toggleButton.textContent = 'Toggle Sidebar';

toggleButton.style.position = 'fixed';

toggleButton.style.top = '10px';

toggleButton.style.left = '10px';

document.body.appendChild(toggleButton);

toggleButton.addEventListener('click', function() {

if (sidebar.style.width === '0px') {

sidebar.style.width = '250px';

document.querySelector('.content').style.marginLeft = '250px';

} else {

sidebar.style.width = '0px';

document.querySelector('.content').style.marginLeft = '0px';

}

});

});

Пример использования

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

Заключение

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

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