Выезжающее боковое меню. Часть 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.
-
Создано 09.07.2018 10:05:20
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.