Как создать адаптивную панель навигации с помощью HTML и CSS
Создание отзывчивой панели навигации – важная часть улучшения вашего пользовательского опыта и навыков веб-дизайна. В этой статье мы покажем вам, как создать адаптивную панель навигации, используя только HTML и CSS (даже ни одной строчки JavaScript!).
Итак, если вы новичок, который изучает интерфейсную разработку и хочет создать панель навигации, вы попали в нужное место. Но прежде чем мы погрузимся глубже, давайте сначала разберемся с основными принципами дизайна адаптивной панели навигации.
Предварительные требования: три ключевых элемента навигационной панели
Совершенно очевидно, что большинство владельцев сайтов хотят привлечь новых посетителей. Первый шаг к этому – показать посетителям четкий и лаконичный путь. Вы должны создать навигационную панель, которая одновременно пробуждает любопытство и привлекает посетителей. При разработке идеальной навигационной панели у вас должно быть три ключевых элемента:
Простой
Он должен быть четким и легко читаемым. Вместо того, чтобы загромождать навигационную панель ссылками на каждую страницу, вам следует перейти к более широким категориям вашего сайта. После этого при необходимости вы можете добавить подменю в виде раскрывающегося списка.
Заметный
Простая навигационная панель совсем не должна быть скучной. Вы должны придерживаться заранее определенного цвета бренда, чтобы сделать дизайн более последовательным. Вы можете экспериментировать с многочисленными цветовыми схемами и использовать более светлые или темные оттенки для выделения и выпадающих меню.
Отзывчивый
Отчет Statista о глобальном использовании интернета показывает, что 59,5 процента населения мира активно пользуются интернетом, а 92,6 процента используют его через мобильные устройства. Этого более чем достаточно, чтобы понять важность внедрения гибкой мобильной навигации на вашем сайте.
Мобильная навигация верхнего уровня довольно популярна. Вы можете использовать гамбургер-меню, гильотину, плавающие значки и вкладки. Спаситель, когда у вас есть пять или более категорий с несколькими иерархиями. Навигация верхнего уровня может значительно сэкономить место на экране, особенно если у вас сайт с большим количеством контента.
Панели вкладок с соответствующими значками идеально подходят для нижней панели навигации, поскольку обычно содержат от трех до пяти меню на одном уровне иерархии. Подменю и последовательные меню следуют за основной категорией в соответствии с родительско-дочерними отношениями.
Создание адаптивной панели навигации с гамбургер-меню
Теперь, когда принципы дизайна кристально ясны, давайте приступим к созданию меню. Мы собираемся создать адаптивную навигационную панель с помощью CSS Flexbox и Media Queries с нуля.
Итак, как будет выглядеть наша навигационная панель? У него будет навигация верхнего уровня с:
- Логотип
- Меню навигации
- Выпадающее меню
- Гамбургер-меню (с помощью взлома флажка)
Начало работы с HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
Мы будем иметь выпадающее меню внутри (главное) меню Сервиса. Мы можем пропустить гамбургер-меню при создании панели навигации рабочего стола. В конце концов, мы еще не обсуждали рабочий процесс флажков.
Выход :
Применение базового CSS: служебные программы
/* UTILITIES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
Двигаясь вперед, давайте стилизуем нашу навигационную панель.
Стилизация панели навигации с помощью CSS Flexbox
Мы будем использовать CSS Flexbox и применять эффекты наведения для выделения. Сервисное меню требует особого внимания, так как вам нужно установить display: none; для нормальных условий и установите для него отображение: блок; когда кто-то парит на нем.
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}Выход :
Адаптивная навигационная панель с использованием медиа-запросов CSS
Как уже говорилось, у нас будет гамбургер-меню, которое будет отображаться только на мобильных устройствах с небольшими размерами экрана. Для этого у нас будет два дочерних элемента <ul class = ”nav-links”> . Во-первых, мы используем input type = «checkbox» и присвоим метке class = «hamburger» . Во-вторых, мы дадим нашему меню навигации class = ”menu” .
Обратите внимание, что & # 9776; представляет собой HTML-объект, отображающий ☰ (значок гамбургера).
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class=”menu”>...</div>
</ul>
</nav>
</body>
Логика использования элемента checkbox заключается в том, что, когда он не установлен, он будет иметь display: none; тогда как при проверке он изменит свойство CSS общего селектора родственника (~), установив его на display: block ; Проще говоря, мы используем флажок для переключения гамбургера и меню навигации между раскрытым и скрытым состояниями.
Создайте стиль навигационной панели для мобильных устройств с помощью медиа-запросов CSS, как показано ниже. В этом случае вы также можете использовать CSS-сетку и JS для мобильного меню .
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
Вот что мы построили:
Рабочий стол
Мобильные устройства
Эксперименты – лучший способ создать идеальную панель навигации
Хорошая навигация по сайту сильно влияет на показатель отказов и коэффициент конверсии. По сути, первая страница вашего веб-сайта должна иметь четкий контекст, иерархическую навигацию и призыв к действию. Структура навигации вашего веб-сайта должна помочь посетителям попасть на популярные или популярные страницы вашего сайта за три клика или меньше. Итак, продолжайте экспериментировать и улучшайте навигацию по сайту!