API tools faq
paste
Advertisement
herizo

Bootstrap 5 Menu

herizo
Jan 13th, 2025
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.45 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Bootstrap Layout with Collapsible Sidebar</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  9.     <style>
  10.         #sidebar {
  11.             min-width: 250px;
  12.             max-width: 250px;
  13.             height: calc(100vh - 56px);
  14.             position: fixed;
  15.             top: 56px;
  16.             left: -250px;
  17.             background-color: #f8f9fa;
  18.             transition: all 0.3s;
  19.             z-index: 1000;
  20.         }
  21.  
  22.         #sidebar.active {
  23.             left: 0;
  24.         }
  25.  
  26.         #content {
  27.             width: 100%;
  28.             padding: 20px;
  29.             min-height: 100vh;
  30.             transition: all 0.3s;
  31.             margin-top: 56px;
  32.         }
  33.  
  34.         .overlay {
  35.             display: none;
  36.             position: fixed;
  37.             width: 100vw;
  38.             height: 100vh;
  39.             background: rgba(0, 0, 0, 0.5);
  40.             z-index: 998;
  41.             opacity: 0;
  42.             transition: all 0.5s ease-in-out;
  43.         }
  44.  
  45.         .overlay.active {
  46.             display: block;
  47.             opacity: 1;
  48.         }
  49.  
  50.         @media (max-width: 768px) {
  51.             #sidebar {
  52.                 margin-left: -250px;
  53.             }
  54.             #sidebar.active {
  55.                 margin-left: 0;
  56.             }
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <!-- Top bar with logo, hamburger, and logout -->
  62.     <div class="bg-light px-3 py-2 d-flex justify-content-between align-items-center fixed-top">
  63.         <div class="d-flex align-items-center">
  64.             <button type="button" id="sidebarCollapse" class="btn btn-light me-2">
  65.                 <i class="fas fa-bars"></i>
  66.             </button>
  67.             <div class="logo">
  68.                 <img src="https://placehold.co/150x50" alt="Logo" class="img-fluid">
  69.             </div>
  70.         </div>
  71.         <button class="btn btn-outline-danger">Logout</button>
  72.     </div>
  73.  
  74.     <!-- Sidebar -->
  75.     <nav id="sidebar">
  76.         <div class="position-sticky">
  77.             <ul class="nav flex-column">
  78.                 <li class="nav-item">
  79.                     <a class="nav-link active" href="#">
  80.                         <i class="fas fa-home me-2"></i>Dashboard
  81.                     </a>
  82.                 </li>
  83.                 <li class="nav-item">
  84.                     <a class="nav-link" href="#">
  85.                         <i class="fas fa-user me-2"></i>Profile
  86.                     </a>
  87.                 </li>
  88.                 <li class="nav-item">
  89.                     <a class="nav-link" href="#">
  90.                         <i class="fas fa-cog me-2"></i>Settings
  91.                     </a>
  92.                 </li>
  93.                 <li class="nav-item">
  94.                     <a class="nav-link" href="#">
  95.                         <i class="fas fa-envelope me-2"></i>Messages
  96.                     </a>
  97.                 </li>
  98.                 <li class="nav-item">
  99.                     <a class="nav-link" href="#">
  100.                         <i class="fas fa-question-circle me-2"></i>Help
  101.                     </a>
  102.                 </li>
  103.             </ul>
  104.         </div>
  105.     </nav>
  106.  
  107.     <!-- Overlay -->
  108.     <div class="overlay"></div>
  109.  
  110.     <!-- Main content -->
  111.     <div id="content">
  112.         <h1>Welcome to the Dashboard</h1>
  113.         <p>Click the hamburger menu to toggle the sidebar.</p>
  114.         <p>This is your main content area. You can add any content here.</p>
  115.     </div>
  116.  
  117.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  118.     <script>
  119.         document.addEventListener('DOMContentLoaded', function() {
  120.             const sidebar = document.getElementById('sidebar');
  121.             const sidebarCollapse = document.getElementById('sidebarCollapse');
  122.             const overlay = document.querySelector('.overlay');
  123.  
  124.             sidebarCollapse.addEventListener('click', function() {
  125.                 sidebar.classList.toggle('active');
  126.                 overlay.classList.toggle('active');
  127.             });
  128.  
  129.             overlay.addEventListener('click', function() {
  130.                 sidebar.classList.remove('active');
  131.                 overlay.classList.remove('active');
  132.             });
  133.         });
  134.     </script>
  135. </body>
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!