<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <button onclick="toggleMenu()">Toggle</button> <div class="sidebar-menu" id="toggleMenu"> <nav> <ul id="accordionExample"> <li class="has-sub"> <a href="#" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">Home</a> <ul id="collapseOne" class="collapse" data-bs-parent="#accordionExample"> <li> <a href="#">Submenu 1</a> </li> <li> <a href="#">Submenu 1</a> </li> <li> <a href="#">Submenu 1</a> </li> <li> <a href="#">Submenu 1</a> </li> </ul> </li> <li class="has-sub"> <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">About Us</a> <ul class="dropdown collapse" id="collapseTwo" data-bs-parent="#accordionExample"> <li> <a href="#">Submenu 2</a> </li> <li> <a href="#">Submenu 2</a> </li> <li> <a href="#">Submenu 2</a> </li> <li> <a href="#">Submenu 2</a> </li> </ul> </li> <li> <a href="#">Service</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> </nav> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script> function toggleMenu(){ var toggleBtn = document.getElementById("toggleMenu"); toggleBtn.classList.toggle("show") } function addClass(){ var subMenu = document.getElementByClassName('has-sub'); } </script>

body{ margin: 0; padding: 0; } *{ margin: 0; padding: 0; } .sidebar-menu{ background: #424242; width: 250px; padding: 20px 0 20px 20px; } .sidebar-menu ul{ list-style: none; padding-left: 0; } .sidebar-menu ul li{ position: relative; display: block; } .sidebar-menu ul li a{ color: #ffffff; display: block; padding: 5px 10px; } .sidebar-menu ul li > ul{ position: absolute; top: 0; left: 120%; width: 230px; padding: 10px; transition: all 0.5s ease; } .sidebar-menu ul ul{ background: #f1f1f1; border-radius: 3px; } .sidebar-menu ul ul li > a{ color: #424242; } .sidebar-menu{ display: none; } .sidebar-menu.show{ display: block; } .sidebar-menu ul li > ul{ position: relative; left: 0; } @media only screen and (min-width: 768px){ .sidebar-menu ul ul{ opacity: 0; visibility: hidden; } .sidebar-menu ul li:hover ul{ visibility: visible; opacity: 1; left: 100%; } }