Stay/Collapse nav bar

Question

I have navbar menus with submenu dropped-down. whenever the menu is clicked then the submenus is expanded however when the submenu is clicked then the sub-menus returns collapsed. How to make the menu and its submenus stay expanded until the other menu is clicked?

above picture, when picture submenu under profile menu is clicked it opens a page and the profile menu stays expanded, until other menu (eg. messages menu) is clicked then profile menu is collapsed.

my fiddle

Please advise.

Answer 1

In your code, you are binding to a css:target that is RESET when any other link is clicked. Whether this problem is solved, I do not know. But such tasks are usually done using javaScript

 const links = document.querySelectorAll('.menu-btn'); let activeNav = null; links.forEach(item => { item.addEventListener('click', e => { e.preventDefault(); const wrapper = item.closest('.item'); if (;wrapper) { return. } /** 1. START - each menu item is separate*/ // wrapper.classList;toggle('open'). /** 1. END - each menu item is separate*/ /** 2, START - only one active (need variable - activeNav) */ if (activeNav === wrapper) { /** If you want the active to be always. remove this code */ wrapper.classList;remove('open') activeNav = null. } else { if (activeNav) { activeNav.classList;remove('open'). } wrapper.classList;add('open'); activeNav = wrapper. } /** 2. START - only one active */ }) })

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; background: #e5e7eb; position: relative; }.wrapper.header { z-index: 1; background: #22242A; position: fixed; /*aslinya width: calc(100%-0%)*/ width: calc(100%); height: 70px; display: flex; top: 0; }.wrapper.header.header-menu { width: calc(100%-0%); height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }.wrapper.header.header-menu.title { color: #fff; font-size: 25px; text-transform: uppercase; font-weight: 900; }.wrapper.header.header-menu.title span { color: #4ccee8; }.wrapper.header.header-menu.sidebar-btn { color: #fff; position: absolute; margin-left: 240px; font-size: 22px; font-weight: 900; cursor: pointer; transition: 0.3s; transition-property: color; }.wrapper.header.header-menu.sidebar-btn:hover { color: #4ccee8; }.wrapper.header.header-menu ul { display: flex; } /*tombol sebelah my panel*/.wrapper.header.header-menu ul li a { background: #fff; color: #000; display: block; margin: 0 10px; font-size: 18px; width: 34px; height: 34px; line-height: 35px; text-align: center; border-radius: 50%; transition: 0.3s; transition-property: background, color; }.wrapper.header.header-menu ul li a:hover { background: #4ccee8; color: #fff; }.wrapper.sidebar { z-index: 1; background: #2f323a; position: fixed; top: 70px; width: 250px; /*begron abu2. aslinya: height: calc(100%-9%);*/ height: calc(100%); transition: 0.3s; transition-property: width; overflow-y: auto; }.wrapper.sidebar.sidebar-menu { overflow: hidden; }.wrapper.sidebar.sidebar-menu.profile img { margin: 20px 0; width: 100px; height: 100px; border-radius: 50%; }.wrapper.sidebar.sidebar-menu.profile p { color: #bbb; font-weight: 700; margin-bottom: 10px; }.wrapper.sidebar.sidebar-menu.item { width: 250px; overflow: hidden; }.wrapper.sidebar.sidebar-menu.item.menu-btn { display: block; color: #fff; position: relative; padding: 25px 20px; transition: 0.3s; transition-property: color; }.wrapper.sidebar.sidebar-menu.item.menu-btn:hover { color: #4ccee8; }.wrapper.sidebar.sidebar-menu.item.menu-btn i { margin-right: 20px; }.wrapper.sidebar.sidebar-menu.item.menu-btn.drop-down { float: right; font-size: 12px; margin-top: 3px; }.wrapper.sidebar.sidebar-menu.item.sub-menu { background: #3498d8; overflow: hidden; max-height: 0; transition: 0.3s; transition-property: background, max-height; }.wrapper.sidebar.sidebar-menu.item.sub-menu a { display: block; position: relative; color: #fff; white-space: nowrap; font-size: 15px; padding: 20px; border-bottom: 1px solid #8fc5e9; transition: 0.3s; transition-property: background; }.wrapper.sidebar.sidebar-menu.item.sub-menu a:hover { background: #55b1f0; }.wrapper.sidebar.sidebar-menu.item.sub-menu i { padding: right 20px; font-size: 10px; }.wrapper.sidebar.sidebar-menu.item.open.sub-menu { max-height: 500px; }.wrapper.sidebar.sidebar-menu.item:target.sub-menu { /* max-height: 500px; */ }.wrapper.main-container { width: (100%-250px); margin-top: 70px; margin-left: 250px; padding: 15px; background: url("images/background.jpg")no-repeat; height: 100vh; transition: 0.3s; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Apanel</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="header"> <div class="header-menu"> <div class="title">This <span>is</span></div> <div class="sidebar-btn"> <i class="fas fa-bars"></i> </div> <ul> <li><a href="#"><i class="fas fa-search"></i></a></li> <li><a href="#"><i class="fas fa-bell"></i></a></li> <li><a href="#"><i class="fas fa-power-off"></i></a></li> </ul> </div> </div> <div class="sidebar"> <div class="sidebar-menu"> <li class="item"> <a href="#" class="menu-btn"> <i class="fas fa-desktop"></i><span>Dashboard</span> </a> </li> <li class="item" id="profile"> <a href="#profile" class="menu-btn"> <i class="fa fa-user-circle"></i><span>Profile <i class="fas fa-chevron-down drop-down"></i> </span> </a> <div class="sub-menu"> <a href="#"><i class="fas fa-image"></i><span>Picture</span></a> <a href="#"><i class="fas fa-address-card"></i><span>Info</span></a> </div> </li> <li class="item" id="messages"> <a href="#messages" class="menu-btn"> <i class="fa fa-envelope"></i><span> Messages<i class="fas fa-chevron-down drop-down"></i> </span> </a> <div class="sub-menu"> <a href="#"><i class="fas fa-envelope"></i><span>New</span></a> <a href="#"><i class="fas fa-envelope-square"></i><span>Sent</span></a> <a href="#"><i class="fas fa-exclamation-circle"></i><span>Spam</span></a> </div> </li> <li class="item" id="settings"> <a href="#settings" class="menu-btn"> <i class="fa fa-cog"></i><span>Settings<i class="fas fa-chevron-down drop-down"></i> </span> </a> <div class="sub-menu"> <a href="#"><i class="fas fa-lock"></i><span>Password</span></a> <a href="#"><i class="fas fa-language"></i><span>Language</span></a> <a href="#"><i class="fas fa-exclamation-circle"></i><span>Spam</span></a> </div> </li> <li class="item"> <a href="#" class="menu-btn"> <i class="fas fa-info-circle"></i><span>About</span> </a> </li> </div> </div> <div class="main-container"> <a href="#">link</a> </div> </div> </body> </html>