Всем привет. Для разработки сайтов использую фреймворк Uikit от Yootheme - в нём есть многие элементы, понятная логика и он не загромождает лишним кодом страницу.
В частности, в нём есть элемент Offcanvas - боковая панель, которая может открываться справа или слева с различными анимациями. Такую панель часто используют для меню на мобильных устройствах, а также для всевозможного текста, который пользователю нужен только по запросу - например, контакты или какая-то справочная информация.
В очередном проекте, у меня появилась задача - сделать, чтобы при клике по меню второй уровень меню выезжал сверху - причём совсем сверху, от края экрана, поверх самого меню. Закрываться подменю должно было по клику на кнопке закрытия, которая расположена там же.
Конечно, можно использовать и dropdown с отрицательным выступом, но, там совсем другие эффекты, заказчик хотел именно "выезжающую" панель, а тут бы получилась "выпадающая", и, плюс, потребуется очень сильно управлять закрытием выпадающей панели, чтобы она закрывалась только по нажатию на кнопку закрытия, а не по событиям мыши или ещё как.
Потому я выбрал всё-таки Offcanvas. Немного изучив его структуру, я понял, что небольшими изменениями в CSS его вполне можно делать вертикальным.
Во-первых, а сразу начал искать, что задаёт время выезда панели - CSS или JS. Нашёл класс uk-offcanvas-bar-animation, который и задаёт время анимации панели:
.uk-offcanvas-bar-animation {transition: left .3s ease-out;}
Меняю время так, чтобы успеть увидеть классы, которые присваиваются панели, пока она выезжает:
.uk-offcanvas-bar-animation {transition: left 10s ease-out;}
Теперь меняем классы панели так, чтобы она была шириной во весь экран, а высотой примерно 1/3 экрана:
.uk-offcanvas-bar {top: -33vh;left: 0;width: 100vw;height: 33vh;}
Также, выше определили начальную позицию панели - сверху, с отступом на её высоту.
Далее определяем положение открытой панели - сверху без отступа от края экрана:
.uk-open > .uk-offcanvas-bar {top: 0;}
Ну, осталось только добавить, чтобы на мелких экранах панель вела себя также, как на больших, при необходимости:
@media (min-width: 640px) {.uk-offcanvas-bar {left: 0;width: 100vw;top: -33vh;height: 33vh;}}
И возвращаем время открытия панели к более адекватному:
.uk-offcanvas-bar-animation {transition: top .3s ease-out;}
Задача выполнена! Что мне нравится в этом фреймворке - что там всё максимально сделано стилями CSS, что позволяет изменять почти каждый компонент согласно твоей задаче, при этом оставляя доступным его JS-функционал.
Наглядно посмотреть, как оно работает, можно на CodePen
Всем спасибо, до новых встреч.