Добавляет рецепт плавного раскрытия выпадающего меню

[solarrust]

Описание

Рецепт, в котором раскрытие выпадающего меню анимируется на чистом CSS.

@TatianaFokina если захочешь намазать сверху доступности, то я не против =)
В целом, пожалуйста, попридирайтесь максимально.

Демо: https://content-4998.dev.doka.guide/recipes/dropdown-animation/

Чек-лист

• [+] Текст оформлен согласно руководству по стилю
• [+] Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
• [+] Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

[TatianaFokina]

Ок, я посмотрю завтра.

[TatianaFokina]

Так, я поняла, что так-то контент от скринридеров не скрыт. И с клавы можно сделать фокус на невидимом пункте. Предлагаю навесить aria-hidden="true" и tabindex="-1" на выпадающий список в закрытом состоянии. Когда пользователь кликает на кнопку, атрибуты можно либо удалять вообще, либо менять их значения false и 0, соответсвенно. Как больше нравится. Ты подправишь демки или мне сделать?

[skorobaeus]

Не возражаешь, если растянем по ширине маленько? У демок горизонтальный вайб, так сказать 😅

.menu-link {
    padding: 0.5lh 80px;
}

[solarrust]

Вносит правки в финальный код

[solarrust]

@TatianaFokina добавила раздел про скрытие меню для скринридеров и клавиатуры в закрытом состоянии.
@skorobaeus поправила стили, как ты предложила.

@HellSquirrel очень жду твоего ревью нашего совместного творчества =)

[github-actions]

Превью контента из 179f8be опубликовано.

[TatianaFokina]

А может помёрджим, а Полина, если что, потом придёт и посмотрит?

[solarrust]

А давай