Создать навигационное меню с помощью свойств отображения
В этом шаге вы создадите горизонтальное навигационное меню, используя свойства отображения, изученные на предыдущих шагах. Этот практический пример покажет, как использовать отображение строчно-блочного для создания адаптивного и чистого навигационного макета.
Создадим HTML-файл с навигационным меню. Откройте WebIDE и создайте новый файл с именем navigation-menu.html
в каталоге ~/project
.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Menu</title>
<style>
.nav-menu {
background-color: #333;
padding: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
}
.nav-menu a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #ffd700;
}
</style>
</head>
<body>
<nav class="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Основные техники, используемые в этом навигационном меню:
display: inline-block
для пунктов меню
- Удаление стандартной стилизации списка
- Добавление эффектов наведения
- Создание горизонтального макета
Проверим содержимое файла:
cat ~/project/navigation-menu.html
Пример вывода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<style>
.nav-menu {
background-color: #333;
padding: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
}
.nav-menu a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #ffd700;
}
</style>
</head>
<body>
<nav class="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Лучшие практики для навигационных меню:
- Использовать семантические HTML5-теги, такие как
<nav>
- Сохранять простую структуру меню
- Обеспечить хорошую читаемость и доступность
- Добавить состояния наведения и активности для улучшения взаимодействия с пользователем