+
+
+
+
diff --git a/recipes/dropdown-animation/index.md b/recipes/dropdown-animation/index.md
new file mode 100644
index 0000000000..271e27b83f
--- /dev/null
+++ b/recipes/dropdown-animation/index.md
@@ -0,0 +1,395 @@
+---
+title: "Плавное раскрытие выпадающего меню"
+description: "Раскрываем меню на чистом CSS без расчёта высоты в JavaScript и знания количества элементов."
+authors:
+ - solarrust
+contributors:
+ - skorobaeus
+related:
+ - css/numeric-types
+ - html/button
+ - css/transition
+tags:
+ - article
+---
+
+## Задача
+
+Иногда встречается задача: создать выпадающее меню, которое будет плавно раскрываться. В этом рецепте будет решение на чистом CSS. Вся магия кроется в единицах измерения [`lh`](/css/numeric-types/). Будем менять высоту строки, тем самым добившись эффекта плавного раскрытия меню.
+
+## Готовое решение
+
+Разметка в этой ситуации не играет особой роли. Вы можете адаптировать её под свои конкретные задачи. Возьмём простой вариант с кнопкой и списком ссылок.
+
+```html
+
+```
+
+Вся магия будет реализована в CSS. Тут готовый код, а полный разбор стилей будет ниже.
+
+```css
+.button {
+ inline-size: 100%;
+ padding: 0.5lh 1.5lh;
+ font: inherit;
+ color: currentColor;
+ background-color: #f28482;
+ border: none;
+ cursor: pointer;
+}
+
+.button:hover,
+.button:focus-visible {
+ background-color: #f5cac3;
+}
+
+.menu {
+ position: relative;
+ display: grid;
+ margin-block-start: 0.5lh;
+ background-color: #f28482;
+
+ overflow: hidden;
+ line-height: 0;
+ color: transparent;
+ transition: line-height 0.5s, color 0.5s;
+}
+
+.menu-item {
+ overflow: hidden;
+}
+
+.menu-link {
+ display: block;
+ padding: 0.5lh 80px;
+}
+
+.menu-link:hover,
+.menu-link:focus-visible {
+ background-color: #f5cac3;
+}
+
+.button.active ~ .menu {
+ line-height: 1.2;
+ color: currentColor;
+}
+```
+
+JavaScript в этом примере будет только добавлять и удалять класс кнопке по клику или нажатию на Enter, а ещё менять значения атрибута [`aria-expanded`](/a11y/aria-expanded/).
+
+```js
+const button = document.querySelector('.button')
+const menu = document.querySelector('.menu')
+const menuLinks = document.querySelectorAll('.menu-link')
+
+button.addEventListener('click', (e) => {
+ button.classList.toggle('active')
+
+ if (button.classList.contains('active')) {
+ button.setAttribute('aria-expanded', 'true')
+ menu.setAttribute('aria-hidden', 'false')
+ menuLinks.forEach(link => link.setAttribute('tabindex', '0'))
+ } else {
+ button.setAttribute('aria-expanded', 'false')
+ menu.setAttribute('aria-hidden', 'true')
+ menuLinks.forEach(link => link.setAttribute('tabindex', '-1'))
+ }
+})
+```
+
+
+
+## Разбор решения
+
+Чаще всего, чтобы раскрыть выпадающее меню плавно, используют JavaScript для расчёта конечной высоты элемента. Это нужно, чтобы анимировать переход между `height: 0px` и рассчитанной конечной высотой в пикселях.
+
+Обойдёмся без лишних усилий только CSS и его современными возможностями.
+
+### Разметка
+
+Для начала разберём простую разметку примера. Она может быть какой угодно, в зависимости от решаемой вами задачи.
+
+Это могут быть вложенные списки, `` или любой другой элемент. Для демонстрации нам достаточно кнопки и списка со ссылками, который и будет являться выпадающим меню.
+
+Для раскрытия меню лучше всего использовать кнопку [`