Користувальне оформлення списків, що випадають
Привіт друзі! Сьогодні ми хочемо розповісти вам ще дещо про CSS! Цього разу давайте поговоримо (і зробимо це!) про створення чогось більш практичного, ніж кнопки та перемикачі. Давайте поговоримо про списки, що випадають. Мета цього посібника полягає в тому, щоб показати вам, як створити привабливе меню, що випадає без використання зображень, вдавшись лише до коду CSS. Для того, щоб все у нас запрацювало, нам знадобиться рядок коду jQuery.
Те, що слід знати перед початком:
* У уривках CSS-коду ви не побачите браузерних префіксів, але вони є у файлах архіву. Ми реалізуємо це за допомогою наступного уривка коду:
Перше питання: що нам потрібно для створення списку, що випадає? Загалом ми використовуємо поділ зі span-елементом і неупорядкованим списком для створення списку (ми могли б змінити цей код для створення декількох прикладів):
Зараз нам потрібно буде озброїтися JavaScript. Так як для всіх демо-файлів використовується той самий JS-сніпет, давайте спочатку розберемося з ним:
Що робить цей скрипт? Спочатку він перемикає клас під назвою .active, коли ви кликаєте оболонкою. Це означає, що якщо оболонка немає класу .active, він додає його, і якщо вже має, він виключає його.
По-друге, він дуплікує стандартне положення списку, закриваючи його, якщо курсор вашої миші прямує кудись ще на сторінці. В цілому, цей скрипт розповідає про те, що якщо ми клацаємо по дочірньому елементу тега «html» (тобто, по кожному елементу в DOM), оболонка втрачає клас .active. Але нам потрібно виключити подібну поведінку у самій оболонці. Досить просто,чи не правда?
Отже, тепер ми розуміємо, як це все працює, і зараз настав час створювати привабливі списки, що випадають!
Давайте почнемо з чогось простого: звичайний список, що випадає, для вибору статі. Давайте розглянемо розмітку:
Нам потрібно кілька речей: оболонка, (прихований) список, що випадає, і «ярлик», який ми обернемо в span-елемент. Ми використовуємо анкори тому, що це здається коректним з погляду семантики, але ми також можемо використовувати й інший тег.
Давайте поринемо в CSS-код, на якому ми і ставимо акцент у нашому сьогоднішньому посібнику. Почнемо з оболонки:
Тут ми робимо кілька речей. Спочатку виставляємо ширину нашого списку і додаємо деякі відступи і поля. Далі ми надаємо їм деяке оформлення. І нарешті, ми виставляємо деякі налаштування шрифтів, які будуть застосовуватися до списку, що випадає.
Давайте закінчимо з «ярликом», додавши невелику стрілку справа боку за допомогою псевдо-елемента (з урахуванням стилю і без необхідності писати додатковий код).
Ми думаємо, будь-кому відомо, як за допомогою CSS зробити невеликий трикутник завдяки невеликому трюку з межами. Загалом, це хак, але працює на ура! Тут більше нічого робити не треба, просто маленький білий рядок з правого боку оболонки.
Тепер у нас є невелика приваблива кнопочка, але без самого списку, в ній немає ніякого сенсу. Тож давайте приступати до нашого списку!
Що ми щойно зробили? Ми задали список абсолютне позиціонування, і розташували його за кнопкою (top: 100%;). Ми задали йому ту саму ширину, що й кнопці, а ліве та праве значення виставили на 0. І що важливіше, ми приховали його, знизивши непрозорість до 0. Що ж щодо pointer-events?Якщо ми чогось не бачимо, це не означає, що цього нема. Виставивши pointer-events на none, ми запобігаємо натисканню на список, що випадає в той момент, коли він «прихований».
Давайте додамо деякі стилі до елементів списку всередині списку:
Отже, тепер у нас є приваблива кнопка і красиве приховане меню. Тепер нам потрібно зробити так, щоб це меню відображалося, коли користувач натискає по кнопці. відобразити список, що випадає
Тут у нас є три речі:
* По-перше, ми робимо так, щоб список, що випадає, з'являвся за рахунок зміни значення непрозорості на 1. Не забудьте виставити pointer-events на auto для того, щоб активувати взаємодію з цим параметром! * По-друге, ми змінюємо напрямок і колір маленької стрілки. * По-третє, ми змінюємо фон за стрілкою, використовуючи дуже розумну градацію на кнопці. Красиво, чи не так?
Останнє, але не менш важливе полягає в додаванні ще одного уривка коду JavaScript, який задаватиме кнопці відображення значення виділеного елемента.
Тут код дуже простий: коли по елементу натискання, ми отримуємо його значення і відображаємо його в «label».
Теги "i" використовуються для відображення маленьких іконок від FontAwesome. Нам не хотілося б розповідати тут про всі ресурси від FontAwesome, бо про це розповідали вже тисячу разів. Просто будьте впевнені, що вони працюють.
Почнемо з розробки оболонки. Приблизно така сама, якою вона була в нашому попередньому прикладі. Зверніть увагу на 5-піксельний лівий кордон – він дуже важливий у продовженнікерівництва.
Тепер іде маленька стрілка. Така сама, як у попередньому прикладі:
І ось, нарешті, меню, що випадає. Знову ж таки, воно дуже схоже на те, що ми зробили в попередньому прикладі.
Зверніть увагу на перехід, який ми будемо використовувати для того, щоб меню з'являлося з анімацією, замість звичайної появи, як це було в першому демо.
Деякі стилі для посилань та іконок:
А тепер розкрите становище. Все цілком ясно: стрілки змінюють напрямок, а меню, що випадає, стає видимим. Завдяки параметру transition на списку, що випадає, воно з'являється поступово (параметр непрозорості змінюється від 0 до 1).
Цей приклад, мабуть, найбільше нагадує стандартний елемент вибору. Тобто, при виборі якогось елемента стандартне значення ярлика заміняться значенням обраного елемента. Виглядає привабливо, чи не так?
Не більше, ніж у попередніх випадках. Давайте одразу переходити до CSS!
Тут ми використовуємо деякі межі, тінь блоку та закруглені кути. Нам потрібна невелика стрілка:
Тут так само, як і раніше, тому давайте пропустимо даний етап і перейдемо відразу до розробки випадаючого меню і його дочірніх елементів.
Тут варто зазначити таке:
* Ми використовуємо невелику тінь блоку для посилань для того, щоб створити незначний ефект свічення у верхній частині. посилання для того, щоб уникнути некрасивої 1-піксельної межі в самому низу меню. * Ми не змінюємо розмітку для того, щоб помістити іконки у праву частину: просто використовуємо float:right.
Все виглядає правильно, за виняткоммаленька стрілка у верхній частині меню. Ця стрілка важлива: без неї меню виглядає так, ніби воно вирівнюється без прив'язки до кнопки.
Для цієї стрілки ми використовуємо 2 псевдо-елементи? Нам потрібно створити межу навколо них. Ми створюємо білий трикутник, який розташований вгору від сірого кольору та розміром трохи більше. Таким чином, все виглядає так, ніби у нас лише одна маленька стрілка із кордоном.
А тепер переходимо до розкритого стану. Практично те саме. Тільки зверніть увагу, що ми зробили перехід до .dropdown трохи довше, ніж зазвичай (0.5s замість 0.3s). Таким чином, відкриття меню відбувається набагато плавніше.
Завершуючи це демо, нам потрібно додати трохи коду javascript, щоб замінити стандартне значення кнопки на стан вибраної. У першому прикладі ми вже бачили, як це робиться, але тому, що тут у нас більше немає слова «transport», JS трохи відрізняється.
Виглядає інакше, чи не так? Ми подумали, що тут буде круто створити невеликий список запланованих справ замість випадаючого меню або вікна з вибором. Нічого особливого, але трохи відрізняється від попередніх демо.
Жодних більше посилань, жодних іконок. Для кожного елемента ми маємо дві речі: чекбокс, прив'язаний до ярлика.
Тут сказати, в принципі, нічого, крім того, що ми використовуємо важливий відступ зліва для створення достатнього простору для червоних ліній. Тепер наша стрілка знаходиться праворуч:
Випадаюче меню. Нам здається, ви вже добре потоваришували з ним.
Нам потрібно виставити margin-top на 1px, тому що нам потрібно змістити його трохи вниз із-за межі оболонки. Параметр left виставлений на -1px для того, щоб змістити список, що випадає на місце, і мизадаємо той самий кордон, який задавали його батьківському елементу, але цього разу ми виключаємо верхню межу.
Чекбокси позиціоновані абсолютно, з правого боку по центру кожної лінії, але оскільки вони прив'язані до ярликів, ви можете клацнути куди завгодно по лінії для того, щоб переключити їх. Коли чекбокс виділено, відповідний ярлик стає сірим і перекресленим. Просто, але ефективно.
А зараз нам потрібно розібратися з двома тоненькими червоними лініями з лівого боку нашого невеликого блокнота. Існує два способи реалізувати це: один у вигляді псевдо-елементів, а другий у вигляді градацій. Давайте поглянемо на обидва варіанти.
Перший метод створює псевдо-елемент (насправді два: один для кнопки, і другий для меню, що випадає) з лівої та правої межами, які розташовані поверх всього іншого. Другий метод імітує червоні лінії за допомогою градації як на оболонці, так і на випадаючому списку. Так який метод краще? Можливо перший, тому що якщо вам потрібно буде змінити ефект при наведенні на елементи списку, вам потрібно буде змінити градацію, яка не дуже приваблива. Більше того, псевдо-елементи краще підтримуються в браузерах (до IE8), ніж градації, які не підтримуються в IE до 10 версії IE.
Давайте завершимо роботу над розкритим станом. Тут нічого нового.
Наш останній приклад є випадаюче меню адмін-панелей. Для цього меню ми використовуємо іншу анімацію під час перемикання. Замість появи/зникнення ми використовуємо ковзання.
Тут все найпростіше. Давайте перейдемо до меню, що випадає, яке трохи відрізняється від звичайних.
Цього разу ми задамо параметру непрозорості значення 0, щоб приховати меню. Далі виставляємопараметр max-height на 0 і overflow на hidden. Чому ми використовуємо max-height, а не просто height? Тому що ми не знаємо точну висоту розкритого меню, що випадає. Цього разу нам знадобиться pointer-events, оскільки меню тут відсутнє.
Швидкі та прості стилі для списку елементів.
А тепер, активне становище:
Коли меню, що випадає, відкрито, ми змінюємо нижні кути кнопки, її колір, напрямок стрілки і колір стрілки, а також виключаємо обидва її параметри: box-shadow і border. І для того щоб відобразити меню, ми виставляємо max-height випадаючого меню на 400 пікселів. Ми могли б виставити і 500px, і 1000px, і 1000000px; - це не має значення.
Отже друзі, тепер у нас є 5 неймовірних випадаючих меню, які працюють чудово, але що робити зі застарілими браузерами? Ці браузери не розуміють параметра непрозорості. І навіть якщо деякі з них ладнають з фільтрами, вони не розпізнають pointer-events. Це дуже погано, і тому нам потрібний запасний варіант.
Тут нам на допомогу приходить Modernizr. Для тих, хто не знає, що таке Modernizr - це javascript-бібліотека, яка визначає HTML5 і CSS3 в браузері користувача. це*». За допомогою Modernizr ми можемо додавати такі класи в HTML, як наприклад, no-pointerevents, якщо браузер не підтримує no-pointerevent. Давайте розглянемо приклад того, як ми можемо зробити запасний варіант для браузерів, які не підтримують конкретні CSS-параметри:
Якщо браузер не підтримує і непрозорості і pointer-events, тоді ми приховуємо список, що випадає, використовуючи нехитрий параметр display: none;. Якщо браузер не підтримує непрозорість, алепідтримує pointer-events, тоді цей параметр ви виставляємо на auto для того, щоб дозволити користувачеві клікати по меню після того, як воно буде розкрито. Якщо ж браузер не підтримує pointer-events, але підтримує непрозорість, то ми виставляємо параметр на 1 для того, щоб список, що випадає, з'являвся тоді, коли користувач перемикається на клас .active.
Коли включено клас .active, ми відображаємо список, що випадає, використовуючи параметр display: block;. Все неймовірно просто!
Примітка:звичайно ж, це все не стосується демо, де використовується анімація max-height. Всі ці правила працюють з простими прикладами, де використовується лише непрозорість та pointer-events.