Trang chủ
Drawer
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<!-- Nút mở drawer --> <button id="openDrawerBtn" class="drawer-button">☰ Mở Drawer</button> <!-- Drawer --> <div id="drawer" class="drawer"> <!-- Nút đóng drawer --> <span id="closeDrawerBtn" class="drawer-close">×</span> <h2>Menu Drawer</h2> <ul> <li><a href="#" style="color: white; text-decoration: none;">Trang chủ</a></li> <li><a href="#" style="color: white; text-decoration: none;">Sản phẩm</a></li> <li><a href="#" style="color: white; text-decoration: none;">Giới thiệu</a></li> <li><a href="#" style="color: white; text-decoration: none;">Liên hệ</a></li> </ul> </div> <!-- Nội dung trang --> <main> <h1>Trang của bạn</h1> <p>Nội dung chính ở đây.</p> </main>
CSS
Copy
body { font-family: Arial, sans-serif; margin: 0; } /* Nút mở drawer */ .drawer-button { padding: 15px 20px; background: #3498db; color: white; cursor: pointer; display: inline-block; } /* Drawer chính */ .drawer { position: fixed; top: 0; left: -250px; /* ẩn ngoài màn hình */ width: 250px; height: 100vh; background: #222; color: white; padding: 20px; box-sizing: border-box; transition: left 0.3s ease; overflow-y: auto; z-index: 1000; } /* Khi có class 'open' thì hiện drawer */ .drawer.open { left: 0; } /* Nút đóng drawer */ .drawer-close { display: block; margin-bottom: 20px; cursor: pointer; color: #ccc; font-size: 24px; text-align: right; } .drawer-close:hover { color: white; } main { padding: 20px; }
JS
Copy
const openBtn = document.getElementById('openDrawerBtn'); const closeBtn = document.getElementById('closeDrawerBtn'); const drawer = document.getElementById('drawer'); openBtn.addEventListener('click', () => { drawer.classList.add('open'); }); closeBtn.addEventListener('click', () => { drawer.classList.remove('open'); }); // Tùy chọn: click ngoài drawer cũng đóng window.addEventListener('click', (e) => { if (!drawer.contains(e.target) && e.target !== openBtn) { drawer.classList.remove('open'); } });