<MyRusakov.ru />

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

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

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Иконка гамбургер-меню на CSS+JS

Иконка гамбургер-меню на CSS+JS

На этом уроке мы создадим на чистом CSS саму иконку гамбургера-меню и с помощью JS функции, поменяем её внешний вид, на крестик (X), символизирующий – закрывание.

HTML код

Для начала, создадим общий контейнер, на который повесим событие мыши onclick. Внутри которого, будет три блока div с разными классами. Контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. Первый блок изображает верхнюю линию, второй – среднюю и третий – нижнюю. Когда пользователь кликает по этой (this) иконке, выполняется функция burgerMenu(this). Что делает эта функция, мы разберем чуть ниже.

<div class="container" onclick="burgerMenu(this)">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
</div>

CSS код

Иконка гамбургер-меню не является ссылкой, поэтому при наведении на неё, сам курсор не появится, добавим его.

.container {
    cursor: pointer;
}

Нарисуем темные линии, одинаковые для всех трех классов. Предвижу вопрос: "Зачем создавать отдельные классы, если линии все одинаковые?"

.b1, .b2, .b3 {
    width: 36px;
    height: 5px;
    background-color: #000;
    margin: 5px 0;
    transition: 0.3s;
}

Ответ кроется в следующем коде. Нам надо анимировать каждую полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (X). Верхняя и нижняя повернутся на 45 градусов, но в противоположных направлениях и переместятся на несколько пикселей.

.change .b1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}
.change .b3 {
    transform: rotate(45deg) translate(-8px, -8px);
}

Средняя полоска просто исчезнет, став прозрачной.

.change .b2 {opacity: 0;}

Кроме того, мы добавили новый класс change, это значит, что вся эта анимация произойдет, когда запустится функция, переключающая классы.

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

Иконка гамбургер-меню на CSS+JS.

JS код

При клике на контейнер с событием onclick, выполнится JavaScript функция burgerMenu(), которая добавит через метод classList.toggle новое имя класса (change) к нему, что изменит стили каждой горизонтальной полосы: верхняя и нижняя трансформируются в крестик (X). Средняя полоса исчезнет и станет невидимой.

function burgerMenu(icon) {
    icon.classList.toggle("change");
}

Попробуйте в действии анимацию.

See the Pen Иконка гамбургер меню на CSS+JS by porsake (@porsake) on CodePen.


Итоги

Наверняка сейчас, у читателя назрел главный вопрос. Зачем делать эту трансформацию-анимацию иконки? Где это использовать? И вы будете правы, во всей этой конструкции не хватает самого меню. При клике по иконке гамбургеру, должно раскрыться текстовое меню и крестик. При клике по крестику, текстовое меню закроется и мы снова увидим гамбургер.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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