.nav-menu { position: fixed; top: 0; left: -300px; /* Start off-screen */ width: 300px; height: 100vh; background-color: #ffffff; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); opacity: 0; transition: all 0.3s ease-in-out; overflow-y: auto; z-index: 1000; } /* Active state when menu is open */ .nav-menu.active { left: 0; opacity: 1; } /* Optional overlay background */ .nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; z-index: 999; } .nav-overlay.active { opacity: 1; visibility: visible; } /* Nested menu items */ .nav-menu-item { padding: 15px 20px; border-bottom: 1px solid #eee; opacity: 0; transform: translateX(-20px); transition: all 0.3s ease-in-out; } /* Animate nested items when menu is active */ .nav-menu.active .nav-menu-item { opacity: 1; transform: translateX(0); } /* Delay each nested item slightly */ .nav-menu.active .nav-menu-item:nth-child(1) { transition-delay: 0.1s; } .nav-menu.active .nav-menu-item:nth-child(2) { transition-delay: 0.2s; } .nav-menu.active .nav-menu-item:nth-child(3) { transition-delay: 0.3s; } .nav-menu.active .nav-menu-item:nth-child(4) { transition-delay: 0.4s; } .nav-menu.active .nav-menu-item:nth-child(5) { transition-delay: 0.5s; }
