САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

КАК СДЕЛАТЬ

Главная

МЕНЮ

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

ИЗОБРАЖЕНИЯ

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

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

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

ВЕБ САЙТ

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

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

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

PYTHON

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

Как сделать - Анимированное боковое меню



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


Анимированные боковые панели






Редактор кода »

Создать анимированное боковое меню

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

Пример

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">О Нас</a>
  <a href="#">Услуги</a>
  <a href="#">Клиенты</a>
  <a href="#">Контакт</a>
</div>

<!-- Используйте любой элемент для открытия боковой навигации -->
<span onclick="openNav()">open</span>

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

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

Пример

/* Боковое меню навигации */
.sidenav {
  height: 100%; /* 100% Полный рост */
  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 */
}

/* Ссылки в меню навигации */
.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% непрозрачность элемента тела, чтобы "выделить" в боковой панели:

Толчок боковой навигации с/непрозрачность

/* Установите ширину боковой навигации в 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; /* То же, что и ширина боковой навигации */
}
Редактор кода »

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