<nav class="mobile-navbar">
<div class="mobile-logo-container">
<a href="#">
img
</a>
</div>
<ul class="mobile-navigation-items">
<li class="mobile-menu-title">فیلم خارجی</li>
<ul class="mobile-menu-collapse">
<li class="mobile-link-item"><a href="#">اکشن</a></li>
<li class="mobile-link-item"><a href="#">تخیلی</a></li>
<li class="mobile-link-item"><a href="#">علمی</a></li>
<li class="mobile-link-item"><a href="#">کمدی</a></li>
<li class="mobile-link-item"><a href="#">هندی</a></li>
<li class="mobile-link-item"><a href="#">ترسناک</a></li>
<li class="mobile-link-item"><a href="#">درام</a></li>
<li class="mobile-link-item"><a href="#">تاریخی</a></li>
<li class="view-all-videos-mobile"><a href="#" class="view-all-videos "> همه فیلم های خارجی
<svg class="arrow-left-icon" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#f9f9f9">
<rect fill="none" height="24" width="24" />
<path d="M9,19l1.41-1.41L5.83,13H22V11H5.83l4.59-4.59L9,5l-7,7L9,19z" />
</svg><i></i></a></li>
</ul>
</ul>
<ul class="mobile-navigation-items">
<li class="mobile-menu-title">فیلم خارجی</li>
<ul class="mobile-menu-collapse">
<li class="mobile-link-item"><a href="#">اکشن</a></li>
<li class="mobile-link-item"><a href="#">تخیلی</a></li>
<li class="mobile-link-item"><a href="#">علمی</a></li>
<li class="mobile-link-item"><a href="#">کمدی</a></li>
<li class="mobile-link-item"><a href="#">هندی</a></li>
<li class="mobile-link-item"><a href="#">ترسناک</a></li>
<li class="mobile-link-item"><a href="#">درام</a></li>
<li class="mobile-link-item"><a href="#">تاریخی</a></li>
<li class="view-all-videos-mobile"><a href="#" class="view-all-videos "> همه فیلم های خارجی
<svg class="arrow-left-icon" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#f9f9f9">
<rect fill="none" height="24" width="24" />
<path d="M9,19l1.41-1.41L5.83,13H22V11H5.83l4.59-4.59L9,5l-7,7L9,19z" />
</svg><i></i></a></li>
</ul>
</ul>
</nav>
.mobile-menu-collapse {
max-height: 0;
overflow: hidden;
background: #15151a;
// Menu Actives Styles
.menu-active-item {
color: $white-color;
}
.menu-active-item-icon::after {
font-family: "Font Awesome 5 Free";
content: "\f068" !important;
}
.menu-active-item-bg::before {
transform: scaleX(1) !important;
}
.menu-item.show {
min-height: 400px !important;
}
let MobileMenuItems = document.querySelectorAll('.mobile-menu-title');
function toggleMenuItems() {
this.classList.toggle('menu-active-item');
this.classList.toggle('menu-active-item-icon');
this.classList.toggle('menu-active-item-bg');
this.nextElementSibling.classList.toggle('menu-item.show');
this.closest('.mobile-navbar').querySelectorAll('.menu-active-item , .menu-item.show').forEach(element => {
if (element !== this && element !== this.nextElementSibling) {
element.classList.remove('menu-active-item', 'menu-active-item-icon', 'menu-active-item-bg', 'menu-item.show');
}
});
}
MobileMenuItems.forEach(li => {
li.addEventListener('click', toggleMenuItems);
});