Я пытаюсь сделать раскрывающийся список Bootstrap 4 в таком стиле: slinky. js .org
Вот что у меня есть: https://codepen.io/nht910/pen/yLexeEM
Основной код:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
Чтобы выпадающий список имел эффект скольжения:
Я установил два класса .submenu-1
и .submenu-2
до display: none
, и когда пользователь нажимает кнопку со стрелкой, будет показано соответствующее подменю, которое переместится к нему.
когда пользователь щелкнет стрелку назад, оно вернется в главное меню , и после эффекта скольжения fini sh он скроет подменю.
Это то, что у меня есть на данный момент. Но я не знаю, как изменить размер раскрывающегося списка, чтобы он соответствовал содержимому внутри него (Dynami c height), например slinky. js .org .
Большое спасибо.