Как сделать подобное меню?

Question

[Вика Мармеладка]

Как можно сделать так что бы при нажатии на кнопку из нее выезжали теги (другие блоки). По нажатию снова они заезжают обратно при этом плавно скрываются. Неважно через css или js

Comments

[Gary_Ihar]

Для всего меню сделай обертку. Задай фиксированную ширину ей и оверфлоу:хидден. По нажатию на кнопку, js увеличивает ширину так, чтобы было видно все пункты меню. Как вариант

Answer 1

[alexalexes]

Решение без JS:
Принцип действия: Над кнопкой показа меню добавляется скрытый чекбокс, который выступает как триггер состояния. Состояние чекбокса управляет применяемым css правилом на меню.
Кнопку "Server systems development" и скрываемое меню делаете в одном контейнере top-left-container.
На том же уровне, где находится меню делаете прозрачный input type="checkbox" над кнопкой "Server systems development".
Вывод и скрытие меню задаете примерно такими правилами:

div.top-left-container input[type="checkbox"]:checked ~ div.menu
{
/*анимация появления меню*/
}
div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
{
/*анимация скрытия меню*/
}

Решение c JS:
Вешаете обработчик на кнопку Server systems development, проверяете наличие класса отображения на меню. Если нет класса, то добавляете, если есть то убираете (в Jquery будет использоваться функция toggle).

Answer 2

[Дмитрий]

Пример

Answer 3

[Yega Mega]

https://jsfiddle.net/ug5h462m/
Вот полный подробный пример)