Як зробити випадаючий список в HTML

Найпростіший випадає в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.

Є кілька варіантів списків, які можназробити за допомогою тега select: список (варіанти випадають після кліка на основному полі або наведення на нього курсора) і список множинного вибору - в ньому користувач може вибрати кілька пунктів. Перші більш поширені, вони є значущим елементом навігації сучасних сайтів. Список, що випадає множинного вибору можна застосувати, наприклад, в каталогах, де потрібно вибрати кілька характеристик товару.

Змінювати зовнішній вигляд і властивості списків можна за допомогою універсальних і спеціальних атрибутів.

Атрибути тега select

1. Multiple - задає множинний вибір.

2. Size - задає кількість видимих рядків у списку, тобто висоту. І тут все залежить від того, присутній атрибут multiple чи ні. Якщо так, і ви не вказуєте size, то при наявності multiple користувач побачить всі можливі варіанти вибору, якщо ж multiple відсутня, то показана буде всього один рядок, а інші відвідувач зможе прочитати, коли натисне на значок ліфта з правого боку. Якщо ж висота size задана і вона буде меншою за кількість варіантів, то справа з'явиться смуга прокрутки.

3. Name - ім'я. Список, що випадає може обійтися і без нього, але воно може бути необхідним для взаємодії з програмою-обробником на сервері. Як правило, ім'я все-таки вказують.

Тег select не має обов'язкових атрибутів на відміну від тега option.

Атрибути вкладеного тега option

Selected - призначений для виділення пункту списку. Користувач зможе виділяти більше одного пункту, якщо заданий атрибут multiple (див. Вище).
Value - значення. Цей атрибут обов'язковий. Веб-сервер повинен розуміти, які саме пункти списку вибрав користувач.
Label. За допомогою цього атрибута можна скорочувати занадто довгі елементи списків. Наприклад, на екран буде виводитися «Мілан», замість зазначеного в тезі option «Мілан - адміністративний центр Ломбардії. Північна Італія ». Цей атрибут також використовується для угруповання пунктів в списку.

Що стосується ширини списку, то вона встановлюється за умовчанням по довжині самого широкого тексту в списку. Зрозуміло, ширину можна змінювати за допомогою стилів HTML.

Список, що випадає іншими способами

Його можна зробити за допомогою CSS, наприклад,список буде з'являтися при наведенні курсору на елемент сторінки. Відмінні можливості для створення списків надає JavaScript, роботу якого спрощує бібліотека Jquery. Список, що випадає, підключений за допомогою цієї бібліотеки, може бути дуже складним, наприклад, каскадним. Тобто при виборі елемента в одному списку з'являється наступний список, наприклад, існує пункт меню «Жіночий одяг» (при наведенні випадають види одягу), потім при виборі одного з видів, наприклад, «Верхній одяг», випадає список з елементами: куртки, парки, пальто, півпальто, шуби і т. п.

Ми поверхнево перерахували основні способи, придопомогою яких можна створити список, що випадає. Зрозуміло, є маса нюансів в HTML, в CSS і в JavaScript, які дозволяють змінювати функціональність і зовнішній вигляд списків.