<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выезжающее боковое меню. Часть 1.

Выезжающее боковое меню. Часть 1.

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

Перед закрывающим тегом head подключим несколько файлов:

  • normalize.min.css - браузерные дефолтные стили приводит к общему стандарту
  • style.css - здесь будут наши собственные стили
  • fontawesome - ссылка на иконочный шрифт
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

HTML-код

Перед закрывающим тегом body подключаем jQuery и menu.js, куда мы будем писать свой код:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="menu.js"></script>

Создадим в HTML,-файле общий оборачивающий тег с классом wrapper для всех элементов. Дальше создадим блок с классом menu, внутри которого будет иконка-бургер и список в виде ссылок. Ссылки поместим в тег nav с классом menu-list. Далее идёт секция с заголовком, которая при клике по иконке, будет отодвигаться.

На сайте fontawesome.com, ищем бургер-иконку, копируем код и вставляем между тегами span,.

<div class="wrapper">
  <div class="menu">
  <a href="#" class="menu-icon">
    <span><i class="fas fa-bars"></i></span>
  </a>
    <nav class="menu-list">
      <a href="#">Фотостудия</a>
      <a href="#">Ретушь</a>
      <a href="#">Цены</a>
      <a href="#">Контакты</a>
    </nav>
  </div>
  <section>
  <h1>Фотостудия</h1>
  </section>
</div>

Работа над внешним видом в CSS

Высота секции с контентом равна 100% высоте экрана. Выравниваем заголовок h1 с помощью метода flex:, по центру (justify-content: center;) вдоль горизонтальной оси и сверху (align-items: start;) относительно вертикальной оси.

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Задаём фиолетовый цвет у фона секции, внутри секции у h1 - белый цвет.

color: #fff;
background-color: #9b59b6;
}

Оформим родительский элемент wrapper. Позиция relative, для родителя обозначает, что местонахождение дочерних элементов будет рассчитываться от wrapper. Свойство overflow-x отвечает за то, чтобы случайно не появилась горизонтальная полоса прокрутки в момент движения секции, пока скроем - hidden.

.wrapper {
    position: relative;
    overflow-x: hidden;
}

Переходим к оформлению меню, опять применим flex метод.

display: flex;
align-items: center;
justify-content: center;

Зафиксируем положение меню (position: fixed) сверху и слева окна браузера (left, top) зададим ширину 25% от родителя wrapper и на всю высоту экрана.

.menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 25%;
    height: 100vh;
}

Зададим фоновый белый цвет, при клике меню должно плавно выезжать - transition: 0.5s. В обычном состоянии меню должно быть спрятано - свойство transform: translateX задвинет меню по горизонтальной оси в невидимую область влево на 100%.

background-color: #fff;
transition: 0.5s;
transform: translateX(-100%);

А класс menu_active, при клике по иконке, вернет наше меню обратно, для этого пропишем код ниже. Класс menu_active будет задействован в файле menu.js, поэтому в HTML-коде его нет.

.menu_active {
    transform: translateX(0%);
}

К стилям для ссылок меню применим flex метод для выравнивания по центру, space-around создаст между ними равное расстояние.

.menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

flex-direction расставит их в столбик и высота 50% от родителя.

flex-direction: column;
height: 50%;
}

Стилизуем сами ссылки. Убираем подчеркивание - text-decoration, делаем большими заглавными буквами - text-transform, цвет как у фона - color и добавим жирности для шрифта - font-weight.

.menu-list a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    color: #9b59b6;
}

Задаем бургер-иконке белый цвет, делаем её побольше - font-size: 150% и расположим её абсолютно по отношению к окну браузера, играясь со значениями - right и top.

.menu-icon {
    color: #fff;
    font-size: 150%;
    position: absolute;
    right: -35px;
    top: 10px;
}

На следующем уроке мы продолжим делать выезжающее боковое меню.


Демо-пример без jQuery

See the Pen CSS3 left menu by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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