<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

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

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

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

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

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

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

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

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

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

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

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта

Код в HTML:

<nav>
  <div class="wrapper">
  <!-- Меню гамбургер, при клике, развернутся пункты меню -->
   <div class="menuBurger">Меню</div>
    <ul class="menu clearfix">
     <li><a href="#">Главная</a></li>
     <li><a href="#">Тарифы</a></li>
     <li><a href="#">Продукты</a></li>
     <li><a href="#">Услуги</a></li>
     <li><a href="#">Контакты</a></li>
    </ul>
   </div>
</nav>
<section>
  <div class="wrapper">
    <p>Основной контент сайта</p>
  </div>
</section>

Код в CSS:

2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

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

Вставляем скопированный выше код вместо текста "Меню".

<div class="menuBurger">Меню</div>

На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.

.menuBurger {
  display: none; /* иконка гамбургер скрыта */
}
Гамбургер меню на CSS или JS.

3. Переходим к медиа-запросу

На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.

@media screen and (max-width: 530px) {
  .menu {
    display: none; /* пункты меню скрыты */
    background: #f1f2f4;
    position: absolute;
  }

  .menu li {
    float: none; /* пункты меню в столбцах */
  }

  .menuBurger {
    display: inline-block; /* иконка гамбургер видна */
  }
}
Гамбургер меню на CSS или JS.

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

.menu li {
    float: none;
  }

Результат на скриншоте

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

Раскомментируем обратно display: none; - скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.

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

Продолжение следует..

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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