ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

КАК СДЕЛАТЬ

Главная

Меню

Навбар с иконками Меню бургер Меню аккордеон Меню вкладки Вертикальные вкладки Заголовки вкладок Вкладки полной страницы Вкладки при наведении мыши Верхний навбар Адаптивный верхний навбар Навбар с иконками Меню поиска Панель поиска Фиксированный сайдбар Сайдбар навигации Адаптивный сайдбар Полноэкранный навбар Меню Off-Canvas Кнопки навбара при наведении мыши Сайдбар с иконками Горизонтальное меню с прокруткой Вертикальное меню Нижний навбар Адаптивный нижний навбар Нижняя граница нав.ссылок Выровненные справа ссылки меню Ссылки меню по центру Ссылки меню равной ширины Фиксированное меню Скользящая панель на прокрутке Скрыть навбар на прокрутке Сжать навбар при прокрутке Липкий навбар Навбар на изображении Выпадающее меню при наведении мыши Выпадающее меню при клике Выпадающее меню в верхнем навбаре Выпадающее меню в боковом сайдбаре Адаптивный навбар с выпадающим меню Меню субнавигации Выпадающее меню вверх Мега меню Мобильное меню Меню занавес Свёрнутый сайдбар Свёрнутая боковая панель Пагинация Хлебные крошки Группа кнопок Вертикальная группа кнопок Липкий соцбар Таблетки навигации Адаптивный заголовок

Изображения

Слайдшоу Галерея слайдшоу Модальные изображения Лайтбокс Адаптивная сетка изображения Сетка изображения Галерея изображений с вкладками Наложение при наведении курсора на изображение Слайд наложенного изображения Zoom наложенного изображения Title наложенного изображения Иконка наложенного изображения Эффекты изображения Черное и белое изображение Позиция текста над изображением Текстовые блоки над изображением Изображение с прозрачным текстом Фоновое изображение на всю страницу Форма на изображении Имидж героя Размытое фоновое изображение на всю страницу Изменение фона при прокрутке Изображения друг за другом Округлые изображения Изображения аватары Адаптивные изображения Центрирование изображений Эскизы изображений Представление команды на странице Липкое изображение Отразить изображение Встряхнуть изображение Галерея портфолио Портфолио с фильтрацией Zoom изображения Увеличительное стекло на изображении Слайдер сравнения изображений

Кнопки

Кнопки оповещения Контурные кнопки Сплит кнопки с выпадающим списком Анимированные кнопки Затухающие кнопки Кнопка на изображении Соц.медиа кнопки Читать больше Читать меньше Кнопки загрузки Кнопки скачивания Кнопки таблетки Кнопка уведомления Кнопки с иконками Кнопки next/prev Кнопка 'Больше' в навбаре Кнопка-блок Кнопка-текст Округлые кнопки Кнопка быстрой прокрутки вверх

Формы

Форма входа Форма регистрации Форма оформления заказа Контактная форма Форма входа в соцсеть Форма регистрации Форма с иконками Новостная рассылка Сложенная форма Адаптивная форма Popup форма Встроенная форма Очистить поле ввода Копировать текст в буфер обмена Анимированный поиск Кнопка поиска Полноэкранный поиск Поле ввода в навбаре Форма входа в навбаре Пользовательский Checkbox/Radio Выбор пользователя Кнопка - переключатель Выбрать Checkbox Обнаружение Caps Lock Триггер-кнопка нв вводе Проверка пароля Переключить видимость пароля Многошаговая форма Автозаполнение

Фильтры

Список фильтров Таблица фильтров Элементы фильтров Выпадающий фильтр Сортировать список Сортировать таблицу

Таблицы

Таблица в полоску зебры Адаптивная таблица Сравнительная таблица

Больше

Полноэкранное видео Модальные боксы Лента новостей Индикатор прокрутки Прогресс-бары Скил-бар Ползунки Диапазона Всплывающие подсказки Pop-апы Складывающийся бар Календарь HTML вставки Список дел Загрузка Звездный рейтинг Рейтинг пользователя Эффект наложения Контактные фишки Карточки Flip-карточки Карточка профиля Карточка продукта Оповещения Вызов Примечания Лейблы Круги Стиль HR Купон Список группы Адаптивный текст Вырезанный текст Светящийся текст Фиксированный Footer Липкий элемент Равная высота Clearfix (Чистый Float) Адаптивный Float Снэк-бар Полноэкранное окно Рисование при прокрутке Гладкая прокрутка Фоновый градиент при прокрутке Липкий заголовок Сжатие заголовка при прокрутке Таблица цен Паралакс Соотношение сторон Переключатель Лайк/Дизлайк Переключатель Скрыть/Показать Переключатель текста Переключатель класса Добавить класс Удалить класс Активный класс В виде дерева Удалить свойство Оффлайн обнаружение Найти скрытый элемент Перенаправить веб-страницу Zoom при наведении мыши Флип бокс Центрировать по вертикали Переход при наведении мыши Стрелки Формы (фигуры) Ссылка для скачивания Элемент на всю высоту страницы Окно браузера Пользовательский скроллбар Внешний вид устройства Цвет заполнителя Цвет выделения текста Цвет маркера Вертикальная линия Анимированные иконки Таймер обратного отсчета Печатная машинка Осталось времени до определённой даты Сообщения чата Popup-окно чата Разделенный экран Отзывы Раздел счётчиков Слайдшоу цитат Закрываемые элементы списка Типичные точки остановки устройства Перетаскиваемый HTML элемент JS медиа-запросы Подсветка синтаксиса кода JS Анимация Получить элементы iframe

Веб-сайт

Сделать веб-сайт Сделать веб-сайт (W3.CSS) Сделать веб-сайт (BS3) Сделать веб-сайт (BS4) Центрировать сайт по горизонтали Раздел контактов Большой заголовок Пример персонального сайта

Grid (сетка)

Макет 2 колонки Макет 3 колонки Макет 4 колонки Расширяющаяся сетка Список в виде сетки Макет смешанных колонок Адаптивные колонки карт Зигзаг макет Макет блога

Google

Google карты Google карты ЧБ Google переводчик Google диаграммы Google шрифты

Конвертеры

Конвертировать вес Конвертировать температуру Конвертировать длину Конвертировать скорость

Python

Удалить список дубликатов Перевернуть строку

HTML, CSS, JavaScript. Уроки для начинающих

Как сделать - Сайдбар навигации


Узнайте, как создать анимированное закрываемое боковое навигационное меню.







Попробуйте сами »

Создать анимированную боковую навигацию

Шаг 1) Добавить HTML:

Пример

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Используйте любой элемент, чтобы открыть sidenav -->
<span onclick="openNav()">open</span>

<!-- Добавьте весь контент страницы внутри этого div, если вы хотите, чтобы боковая навигация выдвигала контент страницы вправо (не используется, если вы хотите, чтобы sidenav находился сверху страницы -->
<div id="main">
  ...
</div>

Шаг 2) Добавить CSS:

Пример

/* Боковое навигационное меню */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 ширина - изменить это с помощью JavaScript */
  position: fixed; /* Оставайтесь на месте */
  z-index: 1; /* Оставайтесь сверху */
  top: 0; /* Оставайтесь наверху */
  left: 0;
  background-color: #111; /* Фон черный*/
  overflow-x: hidden; /* Отключить горизонтальную прокрутку */
  padding-top: 60px; /* Поместите контент в 60px сверху */
  transition: 0.5s; /* 0.5 второй эффект перехода слайда в боковой навигации */
}

/* Ссылки меню навигации */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* Когда вы наводите курсор мыши на навигационные ссылки, изменяется их цвет */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Положение и стиль кнопки закрытия (верхний правый угол) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Стиль содержимого страницы - используйте это, если вы хотите сдвинуть содержимое страницы вправо при открытии боковой навигации */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* На экранах меньшего размера, где высота меньше 450px, измените стиль sidenav (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Шаг 3) Добавить JavaScript:

Пример ниже выскальзывает в боковой навигации и делает его шириной 250 пикселей:

Оверлей боковой навигаци. Пример

/* Установите ширину боковой навигации до 250 пикселей */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Установите ширину боковой навигации на 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
Попробуйте сами »

Приведенный ниже пример перемещает боковую навигацию и сдвигает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левого поля "страницы из содержимым"):

Боковая навигация выталкивает контент

/* Установите ширину боковой навигации 250 пикселей, и левый край содержимого страницы - 250 пикселей. */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0. */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}
Попробуйте сами »

Приведенный ниже пример также перемещает боковую навигацию и перемещает содержимое страницы вправо, только на этот раз мы добавляем черный цвет фона с непрозрачностью 40% к элементу body, чтобы "выделить" боковую навигацию:

Боковая навигация выталкивает контент с непрозрачностью

/* Установите ширину боковой навигации 250 пикселей, и левое поле содержимого страницы - 250 пикселей и добавьте черный цвет фона к телу. */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0, и цвет фона тела - белым. */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}
Попробуйте сами »

Пример ниже скользит в боковой навигации слева и охватывает всю страницу (ширина 100%):

Боковая навигация на всю ширину:

/* Открыть боковую навигацию */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

/* закрыть/скрыть боковую навигацию */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
Попробуйте сами »

Пример ниже открывает и закрывает боковое меню навигации без анимации:

Боковая навигация без анимации

/* Открыть боковую навигацию */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

/* Закрыть/скрыть боковую навигацию */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}
Попробуйте сами »

В приведенном ниже примере показано, как создать правое навигационное меню:

Правосторонняя навигация:

.sidenav {
  right: 0;
}
Попробуйте сами »

В приведенном ниже примере показано, как создать боковое навигационное меню, которое всегда отображается (зафиксировано):

Всегда отображать боковую навигацию:

/* Боковая навигация */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Страница из содержимым */
.main {
  margin-left: 200px; /* То же, что ширина sidenav */
}
Попробуйте сами »

Совет: Посетите CSS Навбар учебник чтобы узнать больше о панелях навигации.