Как создать действительно выпадающее меню?

Question

[Ivan Bogatov]

Ключевое отличие: подменю не получает видимость, а выплывает из-под пункта меню, причём 2 из-под 1, 3 из-под 2, и так далее.
В целом, это нетрудно, но мне кажется, что я делаю слишком сложно: во-первых, присуждаю каждому рангу меню свой класс (SubmenuElementRung) smer1, smer2... чтобы каждый из них имел свой z-index (ибо по-стандарту ниже написанный пункт меню рисуется ВЫШЕ предыдущего), и чтобы каждый из них уплывал при наведении на свою дистанцию; и во-вторых, сама идея назначать каждому рангу свой z-index мне не нравится.
Возможно, уже есть реализованный вариант или просто мастхевные мысли, как упростить мой?
https://jsfiddle.net/w9yzw5ts/

Answer 1

[Егор Живагин]

Скинь код в песочницу типо jsfiddle / codepen , ... Так нифига не понятно)

Comments

[Ivan Bogatov]

https://jsfiddle.net/w9yzw5ts/
Слишком сложная реализация для dropdown всего навсего.

[Егор Живагин]

Ivan Bogatov, нормальная для такой анимации. На CSS по-другому не выйдет

[Варлам Ерофеич]

Егор Живагин, - отчего же не выйдет? И на css выйдет, и даже на svg...

[Егор Живагин]

Варлам Ерофеич, посмотрел примеры из ответа. Они довольно слабо к вопросу относятся, вся проблема автора именно в анимации появления.

Я не представляю, как можно переделать код автора, упростив его. Разве что анимацию в @animate вынести, но это только лаконичности прибавит.

[Варлам Ерофеич]

Егор Живагин, я сперва подумал, что автор хочет от z-индекса избавиться, вот и грузил примеры с "дисплей-ноне" вместо z-индексов, а если анимацию, то да...
Хотя есть один примерчик, где сочетаются все три "прелести" (меню появляется после скроллинга и оно анимировано)))

[Ivan Bogatov]

Варлам Ерофеич, последнее - крутая вещь.

[Варлам Ерофеич]

Ivan Bogatov, - спасибо... )))

Answer 2

[Варлам Ерофеич]

Пусть я не спец, но "display: none;" мне помогает. Есть эксперименты:
Анимированная иконка
Переключаемые вкладки
CSS-выпады