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

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

5fbb896fa92f5824515190.png
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 3
@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).
Ответ написан
Комментировать
@soledar10
html css3 js jquery
Ответ написан
Комментировать
@yega_mega
https://jsfiddle.net/ug5h462m/
Вот полный подробный пример)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы