<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Анимированный переключатель меню на JavaScript

Анимированный переключатель меню на JavaScript

На этом уроке мы сделаем нестандартную анимацию для переключателя меню-гамбургер на языке JavaScript.

Создание переключателя

Создадим саму кнопку-переключатель toggle и внутри неё три полоски - теги span. Чтобы кнопка-переключатель toggle оказалась в центре страницы, сделаем body флексовым контейнером и зададим ему нужные свойства.

<div class="toggle">
    <span></span>
    <span></span>
    <span></span>
</div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;/*сетка flexbox*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    flex-wrap: wrap;/*можно переносить на новую строку*/
    min-height: 100vh;/*на всю высоту*/
    background: #f5f5f5;/*цвет фона*/
}
.toggle{
    position: relative;/*относительное позиционирование*/
    width: 70px;/*ширина переключателя*/
    height: 70px;/*высота переключателя*/
    background: #ad1457;/*цвет переключателя*/
    border-radius: 10px;/*скругление углов*/
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);/*тень*/
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}


Анимированный переключатель меню.


Нарисуем полоски

Пока визуально мы видим только одну белую полоску, остальные две находятся под верхней полоской.

.toggle span {
    position: absolute;/*абсолютное позиционирование*/
    width: 40px;
    height: 4px;
    background: #fff;
    display: block;/*отображать как блочный элемент*/
    border-radius: 4px;
    transition: 0.5s;/*плавность анимации*/
}


Анимированный переключатель меню.


Обратимся к первому и второму элементу span через псевдокласс nth-child и поменяем позицию полосок по вертикали, немного укоротив их.

.toggle span:nth-child(1){
    transform: translateY(-15px);/*сдвиг по вертикали*/
    width: 25px;/*ширина полоски*/
    left: 15px;/*позиция слева*/
    transition-delay: 0s;/*задержка трансформации*/
}
.toggle span:nth-child(3){
    transform: translateY(15px);
    width: 15px;
    left: 15px;
    transition-delay: 0s;
}


Анимированный переключатель меню.


Состояние полосок для класса active

Подготовим позицию полосок, после клика на переключатель.

.toggle.active span:nth-child(1) {
    transform: translateY(0) rotate(45deg);/*сдвиг и поворот*/
    width: 40px;
    transition-delay: 0.125s;
}

.toggle.active span:nth-child(3) {
    transform: translateY(0) rotate(315deg);
    width: 40px;
    transition-delay: 0.25s;
}
.toggle.active span:nth-child(2) {
    transform: translateX(60px);
    transition-delay: 0;
}


Анимированный переключатель меню.


JavaScript код

И наконец напишем функцию, которая при клике на меню переключит одно состояние на другое. Найдем в документе переключатель toggle, занесем его в переменную menuToggle. Когда наступит событие клика, функция добавит переключателю класс active со всеми CSS-свойствами.

let menuToggle = document.querySelector('.toggle');
menuToggle.onclick = function(){
    menuToggle.classList.toggle('active')
}

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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