Хочу переделать менюшку, что бы она появлялась через расширение контента.
То есть при нажатии на кнопку менюшка начинает расширяться и в результате открывается полностью.
Ну и при повторном нажатии, сворачивалась.
Расширение и сужение по вертикали. То есть через изменение высоты.
При этом, если во время пока панель раскрывается кликнуть ещё раз, что бы она с этого места и начала обратно скрываться. И в другую сторону.
function showHide() {
var menu = document.getElementById("myMenu");
menu.classList.toggle("hide");
}
.container {
display: flex;
flex-direction: column;
background: pink;
align-items: center;
}
#myMenu a {
margin: 2px;
padding: 1px;
}
.hide {
display: none;
}
<button onclick="showHide()">спрятать / показать</button>
<div id="myMenu">
<div class="container">
<a href="#">ссылка 1</a>
<a href="#">ссылка 2</a>
<a href="#">ссылка 3</a>
<a href="#">ссылка 4</a>
<a href="#">ссылка 5</a>
<a href="#">ссылка 6</a>
</div>
</div>
<p>что-то там ещё</p>
<p>что-то там ещё</p>
<p>что-то там ещё</p>