Выезжающее боковое меню. Часть 1.
Сегодня мы научимся делать выезжающее боковое меню при клике на иконку, которое отодвигает контент сайта. А при другом клике по иконке, задвигает меню обратно.
Перед закрывающим тегом head подключим несколько файлов:
- normalize.min.css — браузерные дефолтные стили приводит к общему стандарту
- style.css — здесь будут наши собственные стили
- fontawesome — ссылка на иконочный шрифт
HTML-код
Перед закрывающим тегом body подключаем jQuery и menu.js, куда мы будем писать свой код:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src=»https://myrusakov.ru/menu.js»></script>
Создадим в HTML,-файле общий оборачивающий тег с классом wrapper для всех элементов. Дальше создадим блок с классом menu, внутри которого будет иконка-бургер и список в виде ссылок. Ссылки поместим в тег nav с классом menu-list. Далее идёт секция с заголовком, которая при клике по иконке, будет отодвигаться.
На сайте fontawesome.com, ищем бургер-иконку, копируем код и вставляем между тегами span,.
Работа над внешним видом в 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;
>
Как сделать, чтобы меню было слева, а логотип — на той же линии, но справа?
Надо, чтобы отступ у логотипа был в 15 пикселей от правого края страницы, а меню — отступ 20 пикселей от левого. Между меню и логотипом много свободного места.
Если есть вопросы, задавайте.
Что касается выравнивания элементов по оси X или Y с этим прекрасно справляется flex . Меньше стилей и получаем нужный результат. Что касается разброс элементов по противоположным сторонам, то за это отвечает justify-content: space-between; . При этом правила flex учитывают margin && padding как родительских элементов так и дочерних.
Так же можно использовать grid-Ы . grid-Ы даже круче flex
Sidebar Menu Using HTML and CSS
In this article you will learn how to create sidebar menu using HTML CSS and JavaScript code. Like the navigation menu bar, the sidebar menu is used on many websites.
You can create a nice side menu using basic HTML CSS and JavaScript programming code. I have already designed many more types of sidebar menus. You can follow those tutorials if you want.
This is a very simple side menu bar with a profile image and some basic text. Below that I have added eight menus here. I added icons to each menu and added hover effects to menu items.
When you click on those menu items or move the mouse, the background of those menus will change.
Normally the menu bar is fully visible but there is a button that hides the menu bar when clicked. Here I have created a navigation bar but in that case I have not added any menu items. You can add menu items in that space if you want.
Step 1: Create a basic html structure to create sidebars
To create this you need to create an HTML and CSS file. Then copy the structure below and paste it into the HTML file. In the HTML structure below I have put all the information where you will add the required code. Follow this tutorial and add the code according to the information below.
Exit fullscreen mode
Step 2: Design the background using css code
With that I added some basic CSS code that basically designed the background and gave the sidebar a shape. In this case I have used blue color in the background. You can change this color if you want.
Exit fullscreen mode
Step 3: Add profile images and titles
As you can see in the demo above, first of all here I used a profile image, a title and some description. I have used the following HTML and CSS programming code to make it.
In this case, you can change the profile image to your liking and increase or decrease the size of this image if you want. In this case I used height 100px and width 100px .
Here I have used border-radius 50% in the profile image which makes this image look completely round. You can change this percentage if you want to keep it square or other size.
Как создать бургер меню с выезжающей панелью на чистом CSS
Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.
Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.
Первое что понадобится — добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
В нужное вам место на сайте добавьте html следующий код:
Давайте я подробно распишу что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Для начала, давайте добавим сами CSS стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.
Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
сли вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.