Зміст
Після скасування публікації всі дописи від editorial стануть прихованими та доступними лише для них самих. випадаюче меню Багато хто ненавидить списки, що розкриваються, – і це правильно. Але іноді існує кілька можливих альтернатив, і, якщо це так, ви маєте поліпшити списки, що розкриваються.
Якщо простіше надрукувати, ніж вибрати
Мої постійні читачі знають, що я великий шанувальник Material Design, включно з їхніми випадаючими списками. Закруглені межі чудово підходять інтерфейсам, що мають грайливий зовнішній вигляд.
Усе, що потрібно знати про випадаючий список (dropdown)
Звичайно, нам ще треба красиво оформити пункти, щоб очі не благали про пощаду при перегляді навігації. За допомогою атрибута multiple ви можете дозволити користувачеві вибирати декілька елементів з випадного списку. Як знають мої постійні читачі, минуло багато часу відтоді, як я написав попередню статтю, і я шкодую, що це зайняло так багато часу. Знаєте, немає нічого кращого, ніж глобальна пандемія, яка змусить вас повернутися до написання статей. 1 Активний стан списку, що розкривається (включно з міткою), перевищує 44px? (Ми враховуємо мітку, тому що, якщо ви клацнете по мітці, список, що розкривається, все одно повинен відкритися).
Якщо у вас менше п’яти варіантів
Але зараз ми включимо в роботу css і вже через кілька хвилин наша навігація зміниться. Внески до freeCodeCamp йдуть на наші освітні програми та допомагають оплачувати сервери, послуги та персонал. Тег select дуже корисний, коли ви створюєте випадні списки в HTML. Після скасування призупинення editorial знову зможе коментувати та публікувати публікації. Залиште плейсхолдер порожнім, якщо в інших текстових полях немає плейсхолдерів.
Якщо у вас є два варіанти, і це «on» і «off» (або «так» і «ні»)
Це також може бути окремий елемент, який однаково буде пов’язаний з формою за допомогою одного зі своїх спеціальних атрибутів. Перший – дозволити користувачеві надрукувати відповідь. Степпери також корисні, але я б запропонував використовувати їх тільки в тому випадку, якщо очікується, що буде не більше п’яти варіантів. В іншому випадку ваш бідний користувач буде довго сидіти, клікаючи до 100. На жаль, я багато разів програвав цю битву, але продовжую вести боротьбу.
Загалом-то, спочатку визначимося з тим, як будемо створювати меню. В html5 стандартним способом вважається створювати його в контейнері nav з допомогою маркірованого списку. Маркери пізніше ми приберемо з допомогою css, в меню вони нам зовсім не потрібні. Один із елементів випадного списку з’являється за замовчуванням і буде вибраний, якщо користувач натисне кнопку надсилання одразу після переходу на сторінку. Оболонка – це коли поле має нестандартний вигляд, але, коли ви натискаєте на нього, воно використовує нативний стиль списку, що розкривається.
CSS Випадаючи (що розкриваються) списки
- Таким чином, ми зробили з вами дуже просте і легке випадаюче меню абсолютно без скриптів.
- Як ви можете бачити в цих прикладах, усі вони трохи різняться залежно від платформи та браузера.
- Іноді замість слів «включено» і «вимкнено» використовують слова «активно» (Active) і «неактивно» (Inactive).
- UXPUB — Продуктовий дизайн, UX/UI, figma та проектування інтерфейсів.
- При наведенні на пункт основного меню, вкладений список буде ставати видимим.
Це простий спосіб зберегти стиль сторінки відповідно до вашого бренду і знизити вартість розробки. Це також допомагає вирішити проблеми UX, які можуть виникнути з кастомними полями введення. Однак мене заплутує, коли випадаючі списки відкриваються, а я не казав їм це робити. Стандартний випадаючий список – це те, про що ми думаємо, коли чуємо словосполучення «список, що розкривається» або «список, що випадає».
Багато інших дуже цікавих можливостей css ви можете дізнатися в нашому преміум-курсі з новим фішках css3. Там ви навчитеся робити градієнти, працювати з новими селекторами, створювати тіні і т. Якщо вам подобається css, то точно сподобається ця серія уроків. З цього скріншоту ви можете вже уявити собі приблизний результат.
При наведенні на основний пункт з’являється відповідне йому випадаюче меню. Якщо перевести курсор на самі вкладені пункти, то можна буде за ним клікнути і перейти в потрібний розділ сайту. Таким чином, ми зробили з вами дуже просте і легке випадаюче меню абсолютно без скриптів.
Це також дає змогу позбутися фіктивного першого елемента, оскільки деякі з елементів будуть видимі користувачеві автоматично. Цього можна позбутись, вказавши «select a language» як перший елемент списку. Тому надалі я називатиму це оболонкою, і використовуватиму цей термін на нарадах. Я буду насолоджуватися, коли люди запитуватимуть мене, що це означає, просто щоб я міг показати, наскільки я розумний. Якщо варіанти відповіді числові, у вас є кілька варіантів. А ще ви можете анімувати зміну напрямку стрілки.
Це не все, що ви можете зробити за допомогою тегів та . Ви також можете створити багатошарове поле вибору з елементом всередині тегу . Зазвичай тег select розташовується у формі, а варіанти вибору закодовані в тегу .
Після скасування публікації ця публікація стане невидимою для всіх і доступною лише для Редакція. Він стане прихованим у вашому повідомленні, але, як і раніше, буде видно через постійне посилання коментаря. Крім того, нативні списки, що розкриваються, безпечніші, коли справа доходить до юзабіліті на різних пристроях.
Як додати зображення та інший контент всередині випадаючого списку. Таким чином меню утворює ієрархічну структуру функціональних можливостей програми. UXPUB — Продуктовий дизайн, UX/UI, figma та проектування інтерфейсів. – це класичні підказки для списків, що розкриваються.
Як ви можете бачити в цих прикладах, усі вони трохи різняться залежно від платформи та браузера. Вони не красиві, але дуже зручні у використанні. Другий використовує повзунок (слайдер), щоб вибрати значення. Слайдери особливо корисні для великих чисел або приблизних значень. Активний стан – це те, як виглядатиме список, що розкривається, до того, як користувач із ним взаємодіє.
Якщо у вас менше п’яти варіантів, можливо, простіше використовувати перемикачі, а не додатковий клік, щоб перейти до всіх параметрів списку. Тому що список більше п’яти варіантів, починає займати багато місця. Клас .dropdown-content містить фактичний контент, що розкривається. За замовчуванням він прихований і буде відображатися при наведенні миші (див. нижче).
Робота в кращіх IT командах https://wizardsdev.com/