HTML код
Внутри тега header нужно сделать Div с классом, внутри этого дива сделать ссылку с атрибутом id, дать Id имя и сделать отступ через тег br. И сделать ссылки под кнопки, которые будут пунктами выдвижного меню.
Код
<div class="sidebar">
<a id="closeBtn">Закрыть</a> /* Кнопка закрыть
<br> /* Отступ кнопок от кнопки Закрыть
<a href="#">Блог</a> /* кнопка Блог
<a href="#">Проекты</a> /* кнопка Проекты
<a href="#">Контент</a> /* кнопка Контент
<a href="#">О сайте</a> /* кнопка О сайте
</div>
Результат
Код который я написал, нужно выделить скопировать и удалить, чтобы перенести за пределы тега header, потом просто вставить.
По итогу получился такой код
А результат такой
Тем самым просто отделил меню от шапки сайта.
CSS код
Теперь переходим в файл стилей.
Прописал заранее стиль мобильного меню
Сам код
.sidebar {
position: fixed; /* Установил фиксированное положение при скроле страницы */
top: 0; /* Ставим меню вверху окна браузера */
right: -350px; /* Сдвигаем меню в право за приделы видимости */
height: 100%; /* Высота меню растягивается на высоту окна браузера */
width: 300px; /* Ширина меню всегда 300 пикселей*/
background-color: #fff; /* Цвет фона меню */
padding: 1rem; /* Внутренний отступ меню =1 */
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); /* Толщина и цвет тени меню */
transition: right 0.3s ease-in-out; /* Анимация плавного перехода меню */
z-index: 9999; /* Установил меню на верхний слой для видимости */
color: #000; /* цвет текста меню */
overflow: auto; /* Прокрутка пунктов меню если содержимое вышло за границы меню */
}
.sidebar.show {
right: 0; /* Сдвигаем боковую панель для отображениия */
}
.sidebar a {
display: block; /* Установил кнопку как элемент блока */
color: #000; /* Цвет текста кнопки */
text-decoration: none; /* Убрал подчёркивание ссылок кнопок */
padding: 0.5rem 5px; /* Внутренний отступ для кнопок 5 px */
margin-bottom: 5px; /* Отступ с низу у кнопок 5px */
font-weight: bold; /* Стиль текста кнопок жирный */
transition: color 0.3s ease-in-out; /* плавный переход при изменении свойств кнопок */
border-radius: 5px; /* Скругление кнопок по краям 5px */
cursor: pointer; /* Курсор в виде руки при наведении на кнопку */
}
.sidebar a:hover {
background-color: #333; /* Цвет фона при навидении мыши на ссылку */
color: #fff; /* Изменить цвет текста при наведении мыши на ссылку */
}
Осталось написать Js Файл с движениями