Адаптивное мобильное меню для сайта (часть 1)
На этом уроке мы сверстаем мобильное адаптивное меню, используя в интерактивной его части язык JS. Десктопное навигационное меню на определенном разрешении экрана, превратится в мобильное меню. При клике по кнопке гамбургер, мобильное меню будет выезжать из правой части экрана.
Верстка шапки
Создадим шапку сайта с фоном в виде изображения, которая будет занимать всю высоту экрана. Зададим для шапки цветной фон, на случай если не загрузится картинка. Чтобы у нас не возникло ситуации, когда белые буквы стоят на белом фоне.
<div class="header">..</div>
.header {
font-family: Tahoma, sans-serif;
position: relative;
height: 100vh; // высота шапки
background-color: rgb(25, 22, 75); // подстраховочный фон
background-image: url('../img/bg.jpg'); // путь к файлу с фоном
background-size: cover; // растянутый фон с сохранением пропорций
background-position: center; // фон расположенный в центре экрана
}
Фоновое изображение может быть излишне ярким и чтобы текст на фоне хорошо читался, необходимо сделать затемнение фону. Для этого создадим специальный блок header-overlay.
<div class="header">
<div class="header-overlay"></div>
</div>
Растянем затемняющий блок на весь экран поверх шапки, чтобы цвет блока полностью не перекрывал изображение, зададим четвертым параметром прозрачность.
.header-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(3, 4, 29, 0.3); // цвет + прозрачность
}
Верстка логотипа и меню навигации
Поместим логотип и меню навигации внутри контейнера nav-container.
<div class="nav-container">
<div class="logo">Bitcoin</div>
<ul class="nav">
<li class="nav__item"><a href="#" class="nav__link">Новости</a></li>
<li class="nav__item"><a href="#" class="nav__link">Аналитика</a></li>
<li class="nav__item"><a href="#" class="nav__link">Графики</a></li>
<li class="nav__item"><a href="#" class="nav__link">Брокеры</a></li>
</ul>
</div>
Обозначим максимальную ширину у контейнера 1300 пикселей, чтобы на больших экранах меню не показывалось на весь экран и зададим поля сверху, слева и справа. Чтобы при уменьшении экрана содержимое контейнера не прилипало к краям экрана.
.nav-container {
display: flex; // flex-контейнер
justify-content: space-between; // поставим логотип слева, а меню справа
align-items: center; // выравнивание по вертикали
margin: 0 auto; // контейнер в центре по горизонтали
max-width: 1300px;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
CSS для логотипа и меню
.logo {
font-size: 32px;
font-weight: 800;
color: #fff;
}
.nav {
display: flex;
list-style-type: none; // убираем маркеры у списка
}
.nav__item {
margin-right: 50px; // отступы между пунктами меню
}
.nav__item:last-child {
margin-right: 0px; // обнуляем отступ у последнего пункта
}
// стилизация пунктов меню
.nav__link {
font-size: 22px;
font-weight: 600;
color: #fff;
text-decoration: none;
}
// стилизация эффекта наведения
.nav__link:hover {
color: #ff0800e7;
}
Вторая часть урока выйдет в следующей статье.
-
Создано 08.04.2020 10:16:24
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.