Русский

Учебник CSS

Учебник CSS3

CSS Продвинутый

Ссылки на CSS

CSS адаптивный

CSS - Dropdowns: A Beginner's Guide

Привет, будущие веб-дизайнеры! Сегодня мы окунемся в奇妙ный мир CSS-выпадающих списков. Как ваш добрый сосед по компьютеру, я с радостью проведу вас через это путешествие. Не волнуйтесь, если вы никогда раньше не писали ни строчки кода - мы начнем с самых азов и постепенно дойдем до более сложного. Так что возьмите кружку кофе (или чая, если это ваше дело), и давайте начнем!

CSS - Dropdowns

Что такое CSS-выпадающий список?

Прежде чем мы перейдем к коду, давайте поймем, что такое выпадающий список. Представьте, что вы на модном ресторане, и официант протягивает вам меню. Но это не просто меню - это магическое меню! Когда вы нажимаете на "Закуски", появляется список вкусных starters. Именно так и работает выпадающий список на веб-сайте. Это меню, которое при взаимодействии показывает дополнительные опции.

Теперь давайте посмотрим, как мы можем создать это魔法 с помощью CSS!

CSS Dropdown - Простой пример

Давайте начнем с простого выпадающего меню. Вот HTML и CSS код:

<div class="dropdown">
<button class="dropbtn">Выпадающее меню</button>
<div class="dropdown-content">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</div>
.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;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

Давайте разберем это:

  1. Мы создаем контейнер (<div class="dropdown">) для всего нашего выпадающего списка.
  2. Внутри него у нас есть кнопка (<button class="dropbtn">), которая будет вызывать выпадающий список.
  3. Самое содержимое выпадающего списка находится в другом div (<div class="dropdown-content">).
  4. Мы используем CSS, чтобы скрыть содержимое выпадающего списка по умолчанию (display: none;).
  5. Когда мы наводим курсор на контейнер выпадающего списка, мы показываем содержимое (display: block;).

CSS Dropdown - Эффект при наведении

Теперь, когда у нас есть базовое выпадающее меню, давайте сделаем его немного интереснее с помощью эффекта при наведении:

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

Этот CSS изменит цвет кнопки при наведении. Это как будто кнопка говорит: "Эй, я готов показать вам больше опций!"

CSS Dropdown - Выпадающий список при клике

Иногда мы хотим, чтобы наш выпадающий список appeared при клике, а не только при наведении. Вот как мы можем сделать это с помощью небольшого JavaScript:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Выпадающее меню</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</div>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.show {display:block;}

Этот скрипт переключает класс 'show' при клике на кнопку и закрывает выпадающий список, если вы кликните в любом другом месте на странице.

CSS Dropdown - Меню, выровненное по правому краю

Что, если мы хотим, чтобы наш выпадающий список выравнивался по правому краю вместо левого? Легко!

.dropdown-content {
right: 0;
}

Просто добавьте это к вашему существующему CSS. Это как будто вы говорите вашему выпадающему списку: "Переместись вправо, пожалуйста!"

CSS Dropdown - Меню, выровненное по левому краю

Для полноты, вот как explicitly выровнять ваше меню по левому краю (хотя это обычно значение по умолчанию):

.dropdown-content {
left: 0;
}

CSS Dropdown - С изображением

Давайте сделаем наш выпадающий список еще интереснее, добавив изображение:

<div class="dropdown">
<button class="dropbtn">Выпадающее меню</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
</div>
</div>
.dropdown-content img {
margin: 10px 0;
}

Теперь ваш выпадающий список имеет красивое изображение вверху. Это как будто добавили вишенку на ваш CSS-мороженое!

CSS Dropdown - С навигационной панелью

Наконец, давайте посмотрим, как мы можем интегрировать наш выпадающий список в навигационную панель:

<ul class="navbar">
<li><a href="#">Домой</a></li>
<li><a href="#">Новости</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Выпадающее меню</a>
<div class="dropdown-content">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</li>
</ul>
.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;
}

.navbar .dropdown {
display: inline-block;
}

И вот оно! Полностью функциональная навигационная панель с выпадающим меню.

Заключение

Поздравляю! Вы только что научились создавать различные типы CSS-выпадающих списков. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими примерами. Изменяйте цвета, добавляйте анимации или даже try combining разные типы выпадающих списков на одной странице.

Вот quick reference table методов, которые мы рассмотрели:

Метод Описание
Basic Dropdown Простой выпадающий список,出现的 при наведении
Hoverable Effect Выпадающий список с изменением цвета при наведении
Clicked Dropdown Выпадающий список,出现的 при клике
Right-aligned Menu Выпадающий список, выровненный по правому краю
Left-aligned Menu Выпадающий список, выровненный по левому краю (по умолчанию)
With Image Выпадающий список с изображением
With Navbar Выпадающий список, интегрированный в навигационную панель

Помните, в мире веб-дизайна, творчество - ваш лучший друг. Так что идите вперед и создавайте потрясающие выпадающие списки! Кто знает, может быть, вы изобретете следующую большую вещь в веб-навигации. Счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:
CSS - Inline Block
Следующий учебник:
CSS - Видимость