Мобильная версияВыпадающее меню – кнопка плавающей формы ⇐ CSS
-
Anonymous
Выпадающее меню – кнопка плавающей формы
Справочная информация
Я создаю веб-страницу со списком результатов и хочу предоставить меню (раскрывающееся меню Bootstrap) фильтров, которое динамически создается с помощью JS. Поскольку в некоторых фильтрах можно выбрать несколько «элементов», я разрешаю прокрутку меню, если высота превышает 400 пикселей; однако я ненавижу, когда кнопка «Отправить» или «Отменить» формы находится в самом низу меню, когда она может быть не видна глазу пользователя — я думаю, что это создает плохой UX.
ЦЕЛЬ
[*]Я хотел бы создать плавающий эффект для двух кнопок формы, которые «плавают» внизу видимого раскрывающегося меню — очень похоже на class="sticky-bottom" в Bootstrap.. ли> [*]Может быть, я хочу, чтобы фон вокруг кнопок был размытым в виде радиального градиента? [*]Когда пользователь прокручивает меню фильтров до конца, я хочу убедиться, что есть место, где кнопки естественным образом располагались бы, если бы этот плавающий эффект не был закодирован.
Проблема
Я думаю, что я на 50 %. Как я уже сказал, использование класса «липкой нижней части» Bootstrap вроде как помогает, но тогда у вас есть кнопка прямо поверх текста, и она выглядит занятой. Я попробовал добавить к элементу немного стиля CSS...
[...кнопки сюда...] ...и этот вроде соответствует тому, что мне нужно, но я думаю, что он не самый лучший. Я надеялся, что смогу сделать размытую область прогрессивной/градиентной, поскольку она фокусируется на центре элемента кнопки. Это также создает дополнительные отступы в самом меню, что мне не нравится.
Еще одна проблема, которую я создал при попытке создать этот плавающий эффект, - это элемент div, который помещает мои кнопки в «липкое дно», теперь закрывает флажки позади него, не позволяя мне выполнять щелчки мышью по соответствующему элементу.
Демо
[*]Вот демо-версия 1 веб-страницы, урезанная, чтобы проиллюстрировать, что у меня получилось с «липким дном». [*]Вот демо 2, где я пытался сделать -webkit-mask-image с радиальным градиентом, но я не следил за тем, что было необходимо, а что не нужно настраивать. >
Предложения
Я открыт для предложений по улучшению подхода к достижению того, чего я хочу. Может быть, есть вариант, о котором я даже не подумал, который сделает это визуально приятным?
Справочная информация
Я создаю веб-страницу со списком результатов и хочу предоставить меню (раскрывающееся меню Bootstrap) фильтров, которое динамически создается с помощью JS. Поскольку в некоторых фильтрах можно выбрать несколько «элементов», я разрешаю прокрутку меню, если высота превышает 400 пикселей; однако я ненавижу, когда кнопка «Отправить» или «Отменить» формы находится в самом низу меню, когда она может быть не видна глазу пользователя — я думаю, что это создает плохой UX.
ЦЕЛЬ
[*]Я хотел бы создать плавающий эффект для двух кнопок формы, которые «плавают» внизу видимого раскрывающегося меню — очень похоже на class="sticky-bottom" в Bootstrap.. ли> [*]Может быть, я хочу, чтобы фон вокруг кнопок был размытым в виде радиального градиента? [*]Когда пользователь прокручивает меню фильтров до конца, я хочу убедиться, что есть место, где кнопки естественным образом располагались бы, если бы этот плавающий эффект не был закодирован.
Проблема
Я думаю, что я на 50 %. Как я уже сказал, использование класса «липкой нижней части» Bootstrap вроде как помогает, но тогда у вас есть кнопка прямо поверх текста, и она выглядит занятой. Я попробовал добавить к элементу немного стиля CSS...
[...кнопки сюда...] ...и этот вроде соответствует тому, что мне нужно, но я думаю, что он не самый лучший. Я надеялся, что смогу сделать размытую область прогрессивной/градиентной, поскольку она фокусируется на центре элемента кнопки. Это также создает дополнительные отступы в самом меню, что мне не нравится.
Еще одна проблема, которую я создал при попытке создать этот плавающий эффект, - это элемент div, который помещает мои кнопки в «липкое дно», теперь закрывает флажки позади него, не позволяя мне выполнять щелчки мышью по соответствующему элементу.
Демо
[*]Вот демо-версия 1 веб-страницы, урезанная, чтобы проиллюстрировать, что у меня получилось с «липким дном». [*]Вот демо 2, где я пытался сделать -webkit-mask-image с радиальным градиентом, но я не следил за тем, что было необходимо, а что не нужно настраивать. >
Предложения
Я открыт для предложений по улучшению подхода к достижению того, чего я хочу. Может быть, есть вариант, о котором я даже не подумал, который сделает это визуально приятным?
