I'm trying to make a mobile side menu for my responsive website. As i noticed i can't directly use transition to auto height. I've written css , html and js that works but without transition: here is the codes:
const main_ul=document.querySelector('.main-mobile-menue-ul');
main_ul.addEventListener('mouseup',function(e){
if(e.target.className==="main-m-a-sub"){
const parent=e.target.parentElement.children[1];
parent.classList.toggle('show-sub-menue');
}})
const closeButtom=document.getElementById('close-menue');
const mobile_nav=document.getElementById('main-mobile-menue')
closeButtom.addEventListener('click',function(){
mobile_nav.classList.remove('open-menue-btn')
})
const open_menue=document.getElementById('mobile-menue');
open_menue.addEventListener('click',function(){
mobile_nav.classList.add('open-menue-btn')
})header{
position: relative;
}
#main-mobile-menue{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
background-color: #fff;
position: fixed;
z-index: 100;
transform: translateX(-100%);
transition: transform 0.5s;
}
#main-mobile-menue .mobile-header-menue{
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 2px 2px 8px 2px #f0eded;
padding: 20px 15px;
}
#close-menue{
border: none;
background-color: transparent;
font-size: 30px;
color: #556370;
}
.main-mobile-menue-container{
padding: 5px 0px;
}
.main-mobile-menue-container .main-mobile-menue-ul {
padding-left: 0px !important;
list-style:none;
}
.main-mobile-menue-container .main-mobile-menue-ul .main-m-li a{
text-decoration: none;
display: flex;
justify-content: space-between;
padding: 11px 24px;
font-size: 18px;
color: #556370;
}
.main-mobile-menue-container .main-mobile-menue-ul .main-m-li {
border-bottom: 1px solid #ddddddd7;
}
.main-m-li-sub .sub-m-ul{
list-style: none;
background-color: #f7f7f7;
padding-left: 24px !important;
opacity: 0;
visibility: hidden;
display: none;
transition: all 2s ease-out !important;
}
.sub-m-li-link,.main-m-a-sub-sub{
font-size:16px !important;
}
.sub-m-li-sub .main-m-a-sub-sub{
justify-content: start !important;
align-items: center;
}
.sub-m-li-sub .main-m-a-sub-sub .sub-sub-menue-m{
margin-left: 10px;
}
.show-sub-menue{
visibility: visible !important;
display: block !important;
opacity: 1 !important;
}
.close-menue-btn{
transform: translateX(-100%);
}
.open-menue-btn{
transform: translateX(0%) !important;
}<header>
<nav id="main-mobile-menue" >
<div class="mobile-header-menue">
<img src="file:///C:/Users/farda/Desktop/new%20website/website/img/logo-desktop.png" width="200px">
<button id="close-menue" ><i class="fa-solid fa-xmark close-menue"></i></button>
</div>
<div class="main-mobile-menue-container" >
<ul class="main-mobile-menue-ul" >
<li class="main-m-li"><a href="#">Home</a></li>
<li class="main-m-li main-m-li-sub"><a href="#" class="main-m-a-sub">Services <i class="fa-solid fa-chevron-right"></i></a>
<ul class="sub-m-ul " >
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming</a></li>
<li class="sub-m-li sub-m-li-sub"><a class="main-m-a-sub" href="#">Codding <i class="fa-solid fa-chevron-right sub-sub-menue-m"></i></a>
<ul class=" sub-m-ul " >
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming2</a></li>
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming3</a></li>
</ul>
</li>
<li class="sub-m-li"><a class="sub-m-li-link" href="#">Designing</a></li>
</ul>
</li>
<li class="main-m-li main-m-li-sub"><a class="main-m-a-sub" href="#">Services <i class="fa-solid fa-chevron-right"></i></a>
<ul class="sub-m-ul ">
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming</a></li>
<li class="sub-m-li sub-m-li-sub"><a class="main-m-a-sub" href="#">Codding <i class="fa-solid fa-chevron-right sub-sub-menue-m"></i></a>
<ul class="sub-m-ul " >
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming2</a></li>
<li class="sub-m-li"><a class="sub-m-li-link" href="#">programming3</a></li>
</ul>
</li>
<li class="sub-m-li"><a class="sub-m-li-link" href="#">Designing</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>But i don't know how to use Javascript scrollHeight for all sub-menus and i only can do it for calculating height of one sub-menu and other sub-menus inside previous sub-menus on clicking to open, will be hidden or not fully shown!
Could someone help me with javascript scrollHeight for all parts of this menu to has auto height and transition on opening menue and sub-menus that there are inside it?
