Горизонтальная панель навигации CSS
Горизонтальная панель навигации размещает ссылки рядом друг с другом и обычно находится вверху веб-страницы.
Вокруг <ul> часто добавляют элемент <nav>, который служит контейнером панели.
Горизонтальная панель навигации с использованием Float
Один из способов создания горизонтальной панели навигации — задать float для элементов <li>.
Пример
Prompt
Создайте горизонтальную панель навигации, используя float для элементов li. Элемент ul без list-style, без margin/padding, с overflow hidden и тёмным фоном (#333333). Элементы li выравниваются по левому краю (float left). Ссылки блочные, белые, по центру, с отступом 14px 16px, без подчёркивания. При наведении фон меняется на #111111. Включите ссылки Главная, Новости, Контакты, О нас.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Float</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Горизонтальная панель навигации с использованием Flex
CSS flexbox предлагает более современный способ: просто задайте display: flex для <ul>.
Flex-панель навигации
Prompt
Создайте горизонтальную панель навигации с помощью CSS flexbox (display: flex на ul). Элемент ul без list-style, без margin/padding, с тёмным фоном (#333333). Ссылки блочные, белые, с отступом 14px 16px, без подчёркивания. При наведении фон меняется на #111111. Включите ссылки Главная, Новости, Контакты, О нас.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Flex</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Центрированная flex-панель навигации
Чтобы переместить ссылки панели навигации в центр, добавьте к панели justify-content: center.
Prompt
Создайте горизонтально центрированную панель навигации с помощью CSS flexbox. Аналогично flex-панели навигации, но добавьте justify-content: center к ul для центрирования ссылок.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Horizontal Navbar with Flex</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Активное состояние
Пользователи видят, на какой странице находятся, когда её ссылка выделена с помощью класса «active».
Пример
Prompt
Создайте горизонтальную панель навигации с активным состоянием. Используйте панель навигации с тёмным фоном и добавьте класс "active" к ссылке Главная с background-color #04AA6D.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Horizontal Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Серая горизонтальная панель навигации
Здесь панель серая, с тонкой серой границей вокруг.
Пример
Prompt
Создайте серую горизонтальную панель навигации с использованием flexbox. Элемент ul имеет светло-серый фон (#f3f3f3), границу 1px solid #e7e7e7, без list-style, без margin/padding. Ссылки — тёмный текст с отступами. Включите ссылки Главная, Новости, Контакты, О нас.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Horizontal Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
ul li a {
display: block;
color: #666;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #dddddd;
}
ul li a.active {
color: white;
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Выравнивание последней ссылки по правому краю
Любая ссылка или несколько ссылок могут находиться в правой части панели: задайте её элементу списка float: right.
Пример
Prompt
Создайте горизонтальную панель навигации, где последняя ссылка (О нас) выровнена по правому краю с помощью float: right для этого элемента li. Остальные ссылки выровнены по левому краю. Используйте стиль панели навигации с тёмным фоном.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right-align Last Link</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li style="float:right"><a href="#">About</a></li>
</ul>
</body>
</html>
Разделители-границы
Разделители между ссылками создаёт border-right на каждом элементе <li>, кроме последнего.
Пример
Prompt
Создайте горизонтальную панель навигации с разделителями-границами между ссылками. Добавьте border-right: 1px solid #bbbbbb ко всем элементам li, кроме последнего (используя li:last-child). Используйте стиль панели навигации с тёмным фоном и float.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Dividers</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Фиксированная панель навигации
Чтобы закрепить панель навигации вверху или внизу страницы, используйте свойство position вместе с top или bottom.
Зафиксировано вверху
Prompt
Создайте горизонтальную панель навигации, закреплённую вверху страницы, используя position: fixed, top: 0 и width: 100%. Добавьте достаточно содержимого в body, чтобы продемонстрировать прокрутку, пока панель навигации остаётся закреплённой. Добавьте margin-top к содержимому body, чтобы оно не было скрыто за панелью навигации.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
body {
margin-top: 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Fixed Top Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the top.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Зафиксировано внизу
Prompt
Создайте горизонтальную панель навигации, закреплённую внизу страницы, используя position: fixed, bottom: 0 и width: 100%. Добавьте достаточно содержимого в body, чтобы продемонстрировать прокрутку, пока панель навигации остаётся внизу.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Bottom Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h2>Fixed Bottom Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the bottom.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Липкая панель навигации
Для липкой панели навигации нужен position: sticky на <ul>. В зависимости от позиции прокрутки такой элемент переключается между относительным и фиксированным позиционированием.
Примечание: Липкое позиционирование работает, только когда указано хотя бы одно из свойств top, right, bottom или left.
Пример
Prompt
Создайте липкую (sticky) горизонтальную панель навигации, используя position: sticky и top: 0. Добавьте содержимое до и после панели навигации, чтобы продемонстрировать, что она становится фиксированной при прокрутке мимо неё.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h1>Sticky Navigation Bar</h1>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Scroll Down</h2>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Выпадающее меню в панели навигации
При наведении курсора на пункт меню может появляться выпадающее меню, размещённое внутри панели навигации.
Пример
Prompt
Создайте горизонтальную панель навигации с выпадающим меню. Один из пунктов меню ("Dropdown") показывает выпадающий список ссылок при наведении. Используйте div внутри li для содержимого выпадающего меню, скрытого по умолчанию и отображаемого при наведении с position: absolute.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu in Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
}
ul li {
float: left;
}
ul li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Адаптивная панель навигации
С помощью медиазапросов CSS адаптивная верхняя навигация может переключаться с горизонтальной на вертикальную, когда экран становится меньше.
Пример
Prompt
Создайте адаптивную горизонтальную панель навигации, которая сворачивается в вертикальную на маленьких экранах с помощью медиазапросов CSS. На широких экранах ссылки отображаются горизонтально; на узких экранах они располагаются вертикально.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
ul li a.active {
background-color: #04AA6D;
}
@media screen and (min-width: 600px) {
ul li {
float: left;
}
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from horizontal to vertical.</p>
</body>
</html>