Зміст
Хоча довгі списки, що випадають, не ідеальні, ви можете згрупувати деякі елементи за різними категоріями, щоб випадаюче меню спростити пошук потрібного варіанту. Випадаючий список (спадний список / меню), здобув велику популярність у світі інтерфейсів – і, якщо чесно, не без причини. Якщо вони зроблені погано, вони стають громіздкими, приголомшливими і потворними.
Якщо у вас є два варіанти, і це “on” і “off” (або “так” і “ні”)
Іноді замість слів «включено» і «вимкнено» використовують слова «активно» (Active) і «неактивно» (Inactive). Пам’ятайте, що з радіокнопками ви можете обрати лише один елемент з списку, а з прапорцем — декілька. Select гнучкіший, оскільки ви можете налаштувати його для прийняття лише одного або декількох елементів. Ми схильні використовувати нативні або стандартні варіанти, коли час і бюджет обмежені або, коли ми працюємо над MVP. Наявність кастомних полів введення – це глазур на торті, але іноді у нас немає можливості зробити цю солодку глазур.
Як створити випадаюче CSS меню?
Спливаючий список із двома варіантами трохи дратує. Перемикачі чудово підходять для подібних запитань. Якщо всі текстові поля мають плейсхолдери, використовуйте їх.
Вирівняний по правому краю випадаючий контент
Без проблем, тоді в пунктах без випадання просто не створюємо вкладених списків. Якщо вашому користувачеві знадобиться менше часу, щоб набрати текст, ніж вибрати варіант зі списку, що випадає, вам дійсно потрібна відповідь, що краще? Наприклад, для дати народження легше надрукувати, ніж використовувати три окремі списки, що розкриваються.
Демо: Приклад випадаючого списку
Однак це дуже корисно, коли ви хочете показати різницю між речами (собаками, тістечками, офісними меблями тощо). Але ви, звісно, можете робити по-іншому, у згоді зі своєю задумкою. Ви можете зробити так, щоб всі пункти були в одну сходинку. Сподіваюсь, завдяки цій публікації ви детальніше ознайомились з тегом select та тепер можете використовувати його у своїх проєктах.
- Додавання простої іконки на початок поля введення може зробити його більш “спроектованим”.
- Вибірники дат і діапазони дат – це складні звірі, тому я не став вдаватися в подробиці, але, можливо, одного разу я напишу про них окрему статтю.
- Як і їхні текстові поля з рамкою, розкривні списки з рамкою Material Design круті.
- Стандартний випадаючий список – це те, про що ми думаємо, коли чуємо словосполучення “список, що розкривається” або “список, що випадає”.
- Тепер ми бачимо на веб-сторінці тільки основне меню, що нам і потрібно.
- Тому надалі я називатиму це оболонкою, і використовуватиму цей термін на нарадах.
- Перемикачі чудово підходять для подібних запитань.
Коли користувач взаємодіє з полем введення будь-якого типу, воно повинно перемикати стани або змінювати зовнішній вигляд, щоб дати користувачеві зворотний зв’язок. Тут ми розглянемо різні стани списків, що розкриваються. Поле “тільки лінія” було замінено на “список, що розкривається, із заливкою”, і, судячи з користувацьких тестів, воно працює краще. Це набагато зручніше для користувача – і в цьому головне. Я зустрічаю стиль з окремим меню все частіше і частіше. Це має сенс, оскільки дає змогу меню перебувати над або під полем залежно від області перегляду браузера.
В активному стані він має бути зовні схожий на поле введення тексту, поки ви не натиснете на нього і не відкриєте меню. Хоча стандартні списки, що випадають, широко відомі, є кілька різних типів і варіантів, які вам, можливо, доведеться розглянути для вашого наступного проекту. Зверніть увагу, що в ці приклади я включив тільки списки, що розкриваються, які використовуються у формах, а не ті, які використовуються в навігації. У будь-якому випадку, вищенаведений код, я сподіваюся, ви розумієте.
Щоб створити випадний список за допомогою тегу select, спочатку потрібно створити елемент form. Причина в тому, що ви також матимете кнопку відправки для надсилання даних на сервер. При наведенні на пункт 4 з’являється перше випадаюче меню, при наведенні на перший підпункт з’являється окреме меню для нього, яке розташоване збоку. В інших підпунктів таке меню не відображається, так як ми не створювали його в html-розмітки. При вільному введенні тексту користувач може зробити друкарську помилку.
Щойно ви натиснете на список, що випадає, відкриється меню і відобразяться його варіанти. Зазвичай ми бачимо це як “синій ореол” на інтерактивних елементах. Поле “тільки лінія” більше не використовується в керівництві Material Design, але ви все одно зустрінете його в Інтернеті. Якщо ви хочете дізнатися більше, я написав про це в попередній статті, а Dave Chui відповів тут. На відміну від типів списків, що розкриваються, “стилі списків, що розкриваються” відносяться до того, як насправді виглядає список, що випадає, а не як він працює.
Єдина проблема тегу select — його важко стилізувати. Розумним рішенням є використання бібліотеки CSS, яка пропонує чудові класи для стилізації форми разом із елементом select. Коли користувач наводить курсор на пункти в меню, він повинен відображати, який варіант знаходиться під ним. Ну добре, з горизонтальною навігацією ми з вами розібралися, але ж, крім неї на сайтах дуже часто зустрічається і вертикальна і вона теж може бути випадає.
При використанні матеріалів сайту обов’язковою умовою є наявність гіперпосилання в межах першого абзацу на сторінку розташування вихідної статті. Хоча вони хороші для настільних комп’ютерів, вони жахливі для мобільних пристроїв, оскільки є “прокруткою всередині прокрутки”. Використовуючи цю форму, ви погоджуєтеся, що ваші персональні дані оброблятимуться відповідно до нашої Політики конфіденційності. Замість використання border ми використовували CSS властивість box-shadow, щоб меню, яке розкривається, виглядало як “картка”.
Причому тільки той список, що вкладений в пункт, на який наведено курсор. По-перше, самі посилання потрібно зробити блоковими. Це необхідно для того, щоб працювали внутрішні відступи і коректно застосовувалися всі властивості. Далі вказую кольору фону, тексту, параметри рамки, внутрішні відступи, вирівнювання тексту по центру. Якщо у випадаючому списку багато варіантів (яких за можливості слід уникати), дозвольте користувачеві “шукати” потрібний варіант.
Робота в кращіх IT командах https://wizardsdev.com/