<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивное мобильное меню для сайта (часть 2)

Адаптивное мобильное меню для сайта (часть 2)

В первой части урока мы сверстали логотип и меню для десктопных устройств. В чем проблема с меню навигации для планшетов и смартфонов? На маленьких экранах не помещаются все пункты меню в один ряд. Поэтому нашу верстку необходимо приспосабливать (адаптировать) к различным размерам экрана.

Это можно делать по разному и сегодня мы рассмотрим популярный метод адаптации меню навигации. Суть состоит в том, что на устройствах с размерами экранов до 1200 пикселей, вместо горизонтального меню появится кнопка, похожая на гамбургер. Клик по кнопке выкатит с правого боку вертикальное меню. Для пунктов меню, стоящих в столбик, нужно меньше места на экране (по ширине).

Расположим обертку menu-icon для линий кнопки под блоком с навигационным меню.

<div id="menu-toggle" class="menu-icon">
    <div class="menu-icon-line"></div>
</div>

Кнопка гамбургер на CSS

Создадим обертку для линий у кнопки и сделаем изначально ее невидимой.

.menu-icon {
    z-index: 2; // кнопка сверху других элементов
    position: relative; // родитель для линий
    display: none; // спрятали обертку
    width: 30px;
    height: 30px;
    cursor: pointer;
}

Кнопка автоматически появится на экране с шириной от 0 до 1200 пикселей вместо навигационного меню.

@media (max-width: 1200px) {
    .menu-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Построение линий гамбургера

CSS свойству transform зададим плавный переход при анимации верхней и нижней линий кнопки гамбургер при клике.

// Центральная линия
.menu-icon-line {
    position: relative;
    width: 30px;
    height: 5px;
    background-color: #fff;
}

// Верхняя линия
.menu-icon-line::before {
    position: absolute;
    left: 0;
    top: -10px;
    content: '';
    width: 30px;
    height: 5px;
    background-color: #fff;
    transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}

// Нижняя линия
.menu-icon-line::after {
    position: absolute;
    left: 0;
    top: 10px;
    content: '';
    width: 30px;
    height: 5px;
    background-color: #fff;
    transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}

При клике по кнопке будет происходить следующая анимация - центральная линия скроется, а две крайние линии трансформируются в крестик. Для этого мы создадим дополнительные классы со словом active на конце названий, в которых укажем угол поворота. При клике по элементу новые классы присвоются кнопке и тогда анимация сработает (посредством JavaScript). Процесс анимации мы сделаем более плавным, прописав нужные значения свойствам top и transform у свойства transition.

// убираем центральную линию через прозрачность
.menu-icon.menu-icon-active .menu-icon-line {
    background-color: transparent;
}

// поворот верхней линии на 45 градусов .menu-icon.menu-icon-active .menu-icon-line::before {
    transform: rotate(45deg);
    top: 0;
    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}

// поворот нижней линии на -45 градусов .menu-icon.menu-icon-active .menu-icon-line::after {
    transform: rotate(-45deg);
    top: 0;
    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}

JavaScript код

Мы подготовили все необходимые классы для анимации кнопки гамбургер и приступим к программированию. Выберем на странице нужный элемент #menu-toggle и поместим его в переменную menuToggle. При клике по menuToggle сработает функция, которая добавит нашему элементу активный класс, а при повторном клике этот класс удалит. Метод toggle работает как переключатель классов, которые есть у этого элемента. Добавляет класс, если его нет у данного элемента и удаляет текущий класс.

const menuToggle = document.querySelector('#menu-toggle');
menuToggle.onclick = function(){
    menuToggle.classList.toggle('menu-icon-active');
}

Теперь при одному клику кнопка превращается в крестик, а по другому клику, обратно в кнопку гамбургер для мобильной навигации.

На ширине экрана от 0 до 1200 пикселей скроем десктопное меню, вместо которого покажется кнопка гамбургер. Значит пропишем в медиа-запросе только то свойство, которое нужно изменить или добавить.

@media (max-width: 1200px) {
     .nav {
        display: none;
    }
}

Адаптивное мобильное меню для сайта (часть 2).

Третья часть урока выйдет в следующей статье.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.