CSS - Навигационная панель: Ваш портал к навигации по сайту
Здравствуйте, будущие веб-разработчики! Сегодня мы отправляемся в увлекательное путешествие в мир навигационных панелей CSS. Как ваш добрый сосед-педагог по компьютерным наукам, я здесь, чтобы провести вас через этот важный аспект веб-дизайна. Так что возьмите любимый напиток, устройтесь поудобнее, и давайте окунемся в это!
Что такое навигационная панель?
Прежде чем начать кодировать, давайте разберемся, что такое навигационная панель. Представьте, что вы находитесь в огромной библиотеке. Как вы находите нужную книгу? Вы используете указатели и справочники, правда? Ну, навигационная панель для сайтов работает по тому же принципу. Это набор ссылок, которые помогают пользователям легко перемещаться по вашему сайту.
Теперь давайте посмотрим на различные типы навигационных панелей и как их создать с помощью CSS.
Горизонтальная навигационная панель CSS
Горизонтальная навигационная панель, вероятно,是最常见的类型, который вы увидите на сайтах. Это как一行按钮 в верхней части страницы.
Вот пример:
<ul class="navbar">
<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>А вот CSS, чтобы она выглядела красиво:
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}Давайте разберем это:
- Мы удаляем маркеры списка с помощью
list-style-type: none; - Мы устанавливаем浮动 для элементов списка слева, чтобы они были горизонтальными
- Мы стилизуем ссылки, чтобы они выглядели как кнопки
- Мы добавляем эффект при наведении, чтобы сделать его интерактивным
Вертикальная навигационная панель CSS
Иногда вы можете захотеть, чтобы ваша навигационная панель была вертикальной, особенно на мобильных устройствах или в.sidebar. Вот как это можно сделать:
<ul class="vertical-navbar">
<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>И CSS:
.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vertical-navbar li a:hover {
background-color: #555;
color: white;
}Основное различие здесь в том, что мы не浮動 элементы списка. Вместо этого мы устанавливаем ширину для всей навигационной панели и позволяем элементам списка естественным образом укладываться друг на друга.
Выпадающая навигационная панель CSS
Теперь добавим немного изюминки с выпадающим меню! Это也很好 для организации подкатегорий.
<ul class="navbar">
<li><a href="#home">Главная</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Продукты</a>
<div class="dropdown-content">
<a href="#">Ноутбуки</a>
<a href="#">Планшеты</a>
<a href="#">Смартфоны</a>
</div>
</li>
<li><a href="#contact">Контакт</a></li>
</ul>И CSS:
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}Этот CSS использует псевдокласс :hover, чтобы отображать содержимое выпадающего меню при наведении на ссылку "Продукты".
Фиксированная навигационная панель CSS
Фиксированная навигационная панель остается на месте, даже когда вы прокручиваете. Это как личный гид, который всегда рядом, когда вам нужно.
Чтобы сделать навигационную панель фиксированной, нам нужно добавить одну строку в наш CSS:
.navbar {
/* ... другие стили ... */
position: fixed;
top: 0;
width: 100%;
}Это удерживает навигационную панель в верхней части экрана постоянно.
Липкая навигационная панель CSS
Липкая навигационная панель похожа на фиксированную навигационную панель, но она становится фиксированной только после того, как вы прокрутите мимо нее. Это как друг, который follows вас, но только после того, как вы прошли определенное расстояние.
Вот как сделать липкую навигационную панель:
.navbar {
/* ... другие стили ... */
position: sticky;
top: 0;
}Разница в том, что мы используем position: sticky вместо position: fixed.
Разделительные линии для навигационной панели
Иногда вы хотите разделить элементы навигационной панели линиями. Вот хитрый способ сделать это:
.navbar li {
border-right: 1px solid #bbb;
}
.navbar li:last-child {
border-right: none;
}Это добавляет линию между каждым элементом, кроме последнего.
Фиксированная вертикальная навигационная панель
Lastly, let's combine what we've learned to create a fixed vertical navbar:
<ul class="fixed-vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>And the CSS:
.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}This creates a vertical navbar that stays on the left side of the screen as you scroll.
Заключение
И вот мы и arrived! Мы рассмотрели различные стили навигационных панелей, от горизонтальных до вертикальных, от выпадающих до фиксированных. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими стилями и создавать свои уникальные设计方案 навигационных панелей.
Вот таблица, резюмирующая различные типы навигационных панелей, которые мы рассмотрели:
| Тип навигационной панели | Основное свойство CSS | Основная характеристика |
|---|---|---|
| Горизонтальная | float: left; |
Элементы выровнены по горизонтали |
| Вертикальная | width: [value]; |
Элементы сложены вертикально |
| Выпадающая | :hover |
Показывает дополнительные опции при наведении |
| Фиксированная | position: fixed; |
Оставается на месте при прокрутке |
| Липкая | position: sticky; |
Становится фиксированной после прокрутки |
Помните, что кодирование похоже на приготовление пищи - вы начинаете с базовых рецептов, но по мере того, как вы becomes более комфортно, вы можете начать добавлять свои собственные вкусы. Так что вперед, комбинируйте эти стили и создайте что-то потрясающее... я имею в виду, визуально привлекательное!
Счастливого кодирования, и пусть ваши навигационные панели всегда ведут к интересным местам!
Credits: Image by storyset