<MyRusakov.ru />

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

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

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

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

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

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

Адаптивное меню гамбургер

Адаптивное меню гамбургер

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

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

В чем состоит фокус появления и исчезновения меню? Только CSS, а точнее конкретное его свойство:

left: -100vw;

Создается блок с классом menu, где мы позиционируем его с отрицательным значением при заданным position: fixed. Единицы измерения vw, указывают на ширину относительно браузера, где 1vw равен 1% текущего браузера. Получается, что меню находится за пределами браузера с левой стороны и занимает 100% ширины браузера, но пока спрятано.

Создается активный класс меню menu-active с нулевой позицией. При этой позиции блок меню занимает всю видимую часть браузер.

left: 0;

Когда происходит клик по кнопке, к классу menu добавляется активный класс menu-active и блок выдвигается, но об этом поговорим чуть позже.

Адаптивное меню гамбургер.

Выезжающее мобильное меню

По умолчанию это меню спрятано, пока нет клика по кнопке гамбургер.

HTML разметка

<nav class="menu">
<ul>
  <li><a href="#home">Главная</a></li>
  <li><a href="#benefit">Выгода</a></li>
  <li><a href="#portfolio">Примеры</a></li>
  <li><a href="#price">Цены</a></li>
  <li><a href="#contact">Контакты</a></li>
</ul>
</nav>

CSS код

/* Вертикальное меню спрятано */
.menu{
    display: flex;/* технология флексбокс */
    align-items: center; /* выравнивание по центру */
    justify-content: center; /* выравнивание по центру */
    background-color: #e38ec9;
    width: 100vw; /* ширина блока меню */
    z-index: 10;/* слой ниже кнопки */
    position: fixed; /* блок зафиксирован */
    left: -100vw;/* скрывание блока с меню */
    top: 0; /* позиция от левого верха */
    transition: all 0.5s;/* плавное выдвижение блока */
    opacity: .95;/* блок имеет прозрачность */
}
/* Активный класс меню видимое */
.menu-active{
     left: 0; /* блок с меню видимый */
}
/* Стилизация списка меню */
ul {
    list-style: none; /* убрать маркеры */
    padding: 0;
    margin-top: 60px;
    height: 100vh; /* блок занимает всю высоту браузера */
}
/* Стилизация ссылок меню */
a{
    display: block; /* из строчного в блочный */
    color: #6f2d35;
    line-height: 50px;
    text-decoration: none;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    transition: all 0.3s;
    width: 100vw; /* блоки с ссылками на всю ширину */
    display: flex;
    justify-content: center; /* выравнивание по центру */
}
/* Эффект наведения мыши на ссылки */
a:hover{
    background-color: #efc5fa;
    width: 100vw;
}

JQuery код

Если в документе присутствует jQuery код, значит в обязательном должна быть подключена библиотека jQuery. У нас имеется два класса с разным позиционированием блока сменю, осталось только написать функцию переключающую эти два класса при клике по кнопке гамбургер.

$('.gamburger').click(function(){
    $('.menu').toggleClass('menu-active');
});

Расшифруем код выше. При клике по элементу с классом gamburger, сработает функция (некий набор действий) – "Метод toggleClass добавляет блоку с классом меню активный класс menu-active, если его нет и удаляет этот класс, если он уже есть."

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

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

<section id="home">
    <h1>Главная</h1>
    <p>здесь будет текст..</p>
</section>
<section id="benefit">
    <h1>Выгода</h1>
<p>здесь будет текст..</p></section>
<section id="portfolio">
    <h1>Примеры</h1>
    <p>здесь будет текст..</p>
</section>
<section id="price">
    <h1>Цены</h1>
<p>здесь будет текст..</p></section>
<section id="contact">
    <h1>Контакты</h1>
<p>здесь будет текст..</p></section>

Добавим немного стилей.

/* Обертка для всего документа */
#wrap {
    width: 100vw; /* на всю ширину браузера */
    margin: 1% auto;/* отступ от верха и гор. выравнивание */
}
/* Отступы для секций */
section{
    padding: 10px 70px; /* поля вокруг секций */

Адаптивное меню гамбургер.

Мы хотим, чтобы при клике по ссылке меню с якорем #price, пользователя перекидывало на секцию с id="price", а панель с меню, задвигалась бы и не мешала смотреть контент.

jQuery код

Пишем функцию для ссылок меню.

$('.menu a').click(function() {
    $('.menu').removeClass('menu-active');
});

При клике по ссылке меню a, удалить активный класс menu-active у блока с классом .menu.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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