<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

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

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

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

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

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

Гамбургер меню на CSS или JS? Часть 2

Гамбургер меню на CSS или JS? Часть 2

Это вторая часть по гамбургер меню. В первой части мы сделали пока только верстку.

5. Скачать библиотеку jquery-3.3.1.min.js

Подключаем к нашему HTML документу перед закрывающимся тегом body два файла, один из них ещё пустой.

<script src="jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</body>

6. Создать событие на JS

Пишем следующий код в файл script.js

$(function(){
  $('.menuBurger').on('click', function(){
    $('.menu').slideToggle(200, function(){
      if($(this).css('display') === 'none'){
      $(this).removeAttr('style');
  }
});
});
});

Мы не будем подробно разбирать JS код, ограничимся лишь общими комментариями. Могу посоветовать, для тех, кто заинтересовался программированием на JS - Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру"

Эта строчка $('.menuBurger').on('click', function(){ отслеживает событие на клик по элементу с классом .menuBurger.

$('.menu').slideToggle(200, function(){ здесь к самому меню применяется функция slideToggle(), которая поочередно разворачивает или сворачивает, выбранные элементы на странице за 200 милисекунд.

$(this).removeAttr('style'); - убирает из inline стилей display: none;

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

Гамбургер меню на CSS или JS.

6. Разворачивание меню поверх контента

Эта проблема решается с помощью позиционирования меню.

В основном CSS коде надо добавить

.menu {
    position: relative;
}

В медиа-запросе: .menu {
    background: #eee;
    position: absolute;
  }

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

Гамбургер меню на CSS или JS.

Гамбургер меню на CSS

1. Отключаем и удаляем все скрипты

2. Вставляем в HTML файл между тегами div и ul строчку кода <input id="menuCSS" type="checkbox">

3. Заменяем тег div c классом .menuBurger на label

<label class="menuBurger" for="menuCSS">

4. Связать id input c атрибутом for label через #menuCSS

В результате, при клике по иконке гамбургера меню, появляется галочка и в чекбоксе.

Гамбургер меню на CSS или JS.

5. Добавим в медиа-запросе псевдокласс checked

#menuCSS:checked {
    display: none;
  }

Это значит, что при клике по иконке, галочка ставится в чекбокс, но на экране он скрыт, видна только иконка. Идея в том, что если чекбокс не отмечен, то меню закрыто, а если отмечен галочкой, то меню развернуто. Событие с открыванием и закрыванием меню, подвешено на то, в каком состоянии находится чекбокс.

6. Скроем input в CSS

#menuCSS {
    display: none;
    }

7. Меняем код в пункте 5, смотрите выше в статье на следующий

#menuCSS:checked + .menu {
    display: block;
  }

Если связующее звено между label и input #menuCSS отмечено галочкой (checked), то меню развернуто. Вот и вся магия, гамбургер меню работает на чистом CSS и если добавить ему плавную анимацию, то никакой разницы с меню на JS, вы не почувствуете.

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

Вывод

Оба варианта рабочие. Меню на JS, скажем так – правильное, с точки зрения использования кода. Меню на CSS – это «костыль», своего рода «проявление изобретательности», хорошо подходит тем, кто не хочет разбираться в JS и собирается применять это только на своих проектах. Для сайтов на заказ никаких «костылей», настоятельно рекомендую делать верстку, заточенную под дальнейшее применение JS, другими специалистами.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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