New chat
Today
js генерация пазлов svg внутри к
dynamic sidebar html css bootstr
Yesterday
использовать bootstrap jquery da
1 обработать форму ajax <form me
php imap
используя php bootstrap datatabl
fullcalendar datatable
php прибывать к формату 2025-02-
7 Days
код js
кто я
code pj
Get App
My Profile
dynamic sidebar html css bootstr
dynamic sidebar html css bootstrap

Creating a dynamic sidebar using HTML, CSS, and Bootstrap involves using Bootstrap's grid system, components, and JavaScript for interactivity. Below is an example of how to create a responsive and dynamic sidebar that can toggle open and close on smaller screens.

Example: Dynamic Sidebar with Bootstrap

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      transition: all 0.3s;
    }

    #sidebar.collapsed {
      margin-left: -250px;
    }

    #content {
      flex: 1;
      padding: 20px;
      transition: all 0.3s;
    }

    #sidebarToggle {
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      #sidebar {
        margin-left: -250px;
      }

      #sidebar.collapsed {
        margin-left: 0;
      }

      #content {
        margin-left: 0;
      }
    }
  </style>
</head>
<body>
  <div class="d-flex">
    <!-- Sidebar -->
    <div id="sidebar" class="collapsed">
      <div class="p-3">
        <h4>Sidebar</h4>
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Content -->
    <div id="content">
      <button id="sidebarToggle" class="btn btn-primary">Toggle Sidebar</button>
      <h1>Main Content</h1>
      <p>This is the main content area. Resize the browser to see the sidebar toggle on smaller screens.</p>
    </div>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    document.getElementById('sidebarToggle').addEventListener('click', function () {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('collapsed');
    });
  </script>
</body>
</html>
Run HTML

Explanation:

  1. HTML Structure:

    • The sidebar (#sidebar) is a <div> containing navigation links.

    • The main content (#content) contains a button to toggle the sidebar and the main content.

  2. CSS:

    • The sidebar is styled with a fixed width (250px) and a dark background.

    • The collapsed class hides the sidebar by moving it off-screen (margin-left: -250px).

    • The transition property adds smooth animation when toggling the sidebar.

  3. Bootstrap:

    • Bootstrap's grid system and utility classes are used for layout and responsiveness.

    • The d-flex class ensures the sidebar and content are aligned horizontally.

  4. JavaScript:

    • A simple script toggles the collapsed class on the sidebar when the button is clicked.

  5. Responsiveness:

    • On smaller screens (max-width: 768px), the sidebar is hidden by default and can be toggled open.

Customization:

  • Add more navigation links or icons to the sidebar.

  • Use Bootstrap's offcanvas component for a more modern sidebar design.

  • Integrate with a framework like React or Vue for more advanced functionality.

Let me know if you need further assistance!

без смещения id="content"

Если вы хотите, чтобы контент (#content) не смещался при открытии и закрытии боковой панели (#sidebar), можно использовать position: fixed для боковой панели. Это позволит боковой панели "плавать" над контентом, не влияя на его положение.

Вот обновленный пример:

Пример: Динамическая боковая панель без смещения контента

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar without Content Shift</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      position: fixed;
      left: 0;
      top: 0;
      transition: transform 0.3s;
      z-index: 1000;
    }

    #sidebar.collapsed {
      transform: translateX(-250px);
    }

    #content {
      padding: 20px;
      margin-left: 250px; /* Отступ для боковой панели */
      transition: margin-left 0.3s;
    }

    #sidebarToggle {
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      #sidebar {
        transform: translateX(-250px);
      }

      #sidebar.collapsed {
        transform: translateX(0);
      }

      #content {
        margin-left: 0;
      }
    }
  </style>
</head>
<body>
  <!-- Sidebar -->
  <div id="sidebar">
    <div class="p-3">
      <h4>Sidebar</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div id="content">
    <button id="sidebarToggle" class="btn btn-primary">Toggle Sidebar</button>
    <h1>Main Content</h1>
    <p>This is the main content area. The sidebar will overlay the content without shifting it.</p>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    document.getElementById('sidebarToggle').addEventListener('click', function () {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('collapsed');
    });
  </script>
</body>
</html>
Run HTML

Что изменилось:

  1. Боковая панель (#sidebar):

    • Используется position: fixed, чтобы панель оставалась на месте и не влияла на поток документа.

    • Добавлено свойство transform: translateX(-250px) для скрытия панели (вместо margin-left).

  2. Контент (#content):

    • Добавлен margin-left: 250px, чтобы контент не перекрывался боковой панелью.

    • При скрытии панели контент остается на месте, так как панель "плавает" над ним.

  3. Адаптивность:

    • На экранах меньше 768px боковая панель скрыта по умолчанию и появляется поверх контента при нажатии на кнопку.

Как это работает:

  • Боковая панель фиксируется на экране с помощью position: fixed.

  • При открытии и закрытии панели используется transform: translateX, чтобы анимировать движение панели.

  • Контент остается на месте, так как панель не занимает место в потоке документа.

Если нужно, чтобы контент не имел отступа (margin-left) при открытой панели, можно полностью убрать margin-left и использовать z-index для управления слоями. Дайте знать, если нужно такое решение! 😊

1 По умолчанию меню убрано 2 по клику мыши убрать если открыто меню

Чтобы реализовать поведение, при котором:

  1. Меню по умолчанию скрыто.

  2. Меню закрывается при клике вне его области (если оно открыто),

можно использовать JavaScript для обработки кликов и CSS для управления видимостью меню. Вот обновленный пример:

Пример: Динамическая боковая панель с закрытием при клике вне области

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar with Outside Click Close</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      position: fixed;
      left: -250px; /* Скрыто по умолчанию */
      top: 0;
      transition: transform 0.3s;
      z-index: 1000;
    }

    #sidebar.open {
      transform: translateX(250px); /* Открыто */
    }

    #content {
      padding: 20px;
      transition: margin-left 0.3s;
    }

    #sidebarToggle {
      margin-bottom: 20px;
    }

    /* Затемнение фона при открытом меню */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    #overlay.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- Overlay для закрытия меню -->
  <div id="overlay"></div>

  <!-- Sidebar -->
  <div id="sidebar">
    <div class="p-3">
      <h4>Sidebar</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div id="content">
    <button id="sidebarToggle" class="btn btn-primary">Toggle Sidebar</button>
    <h1>Main Content</h1>
    <p>This is the main content area. Click outside the sidebar to close it.</p>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const sidebarToggle = document.getElementById('sidebarToggle');

    // Открыть/закрыть боковую панель
    sidebarToggle.addEventListener('click', () => {
      sidebar.classList.toggle('open');
      overlay.classList.toggle('active');
    });

    // Закрыть боковую панель при клике вне ее области
    overlay.addEventListener('click', () => {
      sidebar.classList.remove('open');
      overlay.classList.remove('active');
    });

    // Закрыть боковую панель при клике на ссылку внутри нее (опционально)
    const sidebarLinks = document.querySelectorAll('#sidebar .nav-link');
    sidebarLinks.forEach(link => {
      link.addEventListener('click', () => {
        sidebar.classList.remove('open');
        overlay.classList.remove('active');
      });
    });
  </script>
</body>
</html>
Run HTML

Что изменилось:

  1. Боковая панель по умолчанию скрыта:

    • Используется left: -250px для скрытия панели за пределами экрана.

    • При добавлении класса open панель сдвигается на 250px вправо с помощью transform: translateX(250px).

  2. Оверлей (затемнение фона):

    • Добавлен элемент #overlay, который отображается при открытии панели.

    • Оверлей затемняет основной контент и позволяет закрыть панель при клике вне ее области.

  3. JavaScript:

    • При клике на кнопку #sidebarToggle панель открывается или закрывается, а оверлей активируется.

    • При клике на оверлей панель закрывается.

  4. Закрытие при клике на ссылки в панели:

    • Добавлена возможность закрывать панель при клике на любую ссылку внутри нее (опционально).

Как это работает:

  • Боковая панель скрыта по умолчанию.

  • При нажатии на кнопку панель открывается, и появляется оверлей.

  • При клике вне панели (на оверлей) панель закрывается.

Этот подход обеспечивает удобное и интуитивно понятное управление боковой панелью. Если нужно что-то доработать, дайте знать! 😊

1 на меню добавить иконку меню 2 не убирать полностью меню оставить иконку меню

Чтобы добавить иконку меню и оставить её видимой даже при закрытой боковой панели, можно использовать иконку из библиотеки иконок (например, Font Awesome) и настроить стили так, чтобы иконка оставалась на экране, даже когда панель скрыта. Вот обновленный пример:

Пример: Боковая панель с иконкой меню

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar with Menu Icon</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome for Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      position: fixed;
      left: -250px; /* Скрыто по умолчанию */
      top: 0;
      transition: transform 0.3s;
      z-index: 1000;
    }

    #sidebar.open {
      transform: translateX(250px); /* Открыто */
    }

    #menuIcon {
      position: fixed;
      left: 10px;
      top: 10px;
      font-size: 24px;
      color: #343a40;
      cursor: pointer;
      z-index: 1001;
    }

    #content {
      padding: 20px;
      transition: margin-left 0.3s;
    }

    /* Затемнение фона при открытом меню */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    #overlay.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- Overlay для закрытия меню -->
  <div id="overlay"></div>

  <!-- Иконка меню -->
  <div id="menuIcon">
    <i class="fas fa-bars"></i>
  </div>

  <!-- Sidebar -->
  <div id="sidebar">
    <div class="p-3">
      <h4>Sidebar</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div id="content">
    <h1>Main Content</h1>
    <p>This is the main content area. Click the menu icon to open the sidebar.</p>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const menuIcon = document.getElementById('menuIcon');

    // Открыть/закрыть боковую панель
    menuIcon.addEventListener('click', () => {
      sidebar.classList.toggle('open');
      overlay.classList.toggle('active');
    });

    // Закрыть боковую панель при клике вне ее области
    overlay.addEventListener('click', () => {
      sidebar.classList.remove('open');
      overlay.classList.remove('active');
    });

    // Закрыть боковую панель при клике на ссылку внутри нее (опционально)
    const sidebarLinks = document.querySelectorAll('#sidebar .nav-link');
    sidebarLinks.forEach(link => {
      link.addEventListener('click', () => {
        sidebar.classList.remove('open');
        overlay.classList.remove('active');
      });
    });
  </script>
</body>
</html>
Run HTML

Что изменилось:

  1. Иконка меню:

    • Добавлена иконка меню (<i class="fas fa-bars"></i>) с использованием Font Awesome.

    • Иконка закреплена в левом верхнем углу с помощью position: fixed.

    • Иконка всегда видна, даже когда боковая панель скрыта.

  2. Боковая панель:

    • По умолчанию панель скрыта (left: -250px).

    • При добавлении класса open панель сдвигается на 250px вправо с помощью transform: translateX(250px).

  3. Оверлей (затемнение фона):

    • Оверлей затемняет основной контент и позволяет закрыть панель при клике вне ее области.

  4. JavaScript:

    • Иконка меню управляет открытием и закрытием панели.

    • Панель закрывается при клике на оверлей или на ссылку внутри панели.

Как это работает:

  • Иконка меню всегда видна в левом верхнем углу.

  • При нажатии на иконку панель открывается, и появляется оверлей.

  • При клике вне панели (на оверлей) или на ссылку внутри панели она закрывается.

Этот подход обеспечивает удобное управление боковой панелью с видимой иконкой меню. Если нужно что-то доработать, дайте знать! 😊

3 / 3
menuIcon изменить цвет иконки при открытой меню белый и закрытом меню черным

Чтобы изменить цвет иконки меню (#menuIcon) в зависимости от состояния боковой панели (открыта или закрыта), можно добавить логику в JavaScript для изменения класса иконки. Вот обновленный пример:

Пример: Изменение цвета иконки меню

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar with Menu Icon Color Change</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome for Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      position: fixed;
      left: -250px; /* Скрыто по умолчанию */
      top: 0;
      transition: transform 0.3s;
      z-index: 1000;
    }

    #sidebar.open {
      transform: translateX(250px); /* Открыто */
    }

    #menuIcon {
      position: fixed;
      left: 10px;
      top: 10px;
      font-size: 24px;
      cursor: pointer;
      z-index: 1001;
      transition: color 0.3s;
    }

    #menuIcon .fas {
      color: #000; /* Черный цвет по умолчанию */
    }

    #menuIcon.open .fas {
      color: #fff; /* Белый цвет при открытой панели */
    }

    #content {
      padding: 20px;
      transition: margin-left 0.3s;
    }

    /* Затемнение фона при открытом меню */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    #overlay.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- Overlay для закрытия меню -->
  <div id="overlay"></div>

  <!-- Иконка меню -->
  <div id="menuIcon">
    <i class="fas fa-bars"></i>
  </div>

  <!-- Sidebar -->
  <div id="sidebar">
    <div class="p-3">
      <h4>Sidebar</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div id="content">
    <h1>Main Content</h1>
    <p>This is the main content area. Click the menu icon to open the sidebar.</p>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const menuIcon = document.getElementById('menuIcon');

    // Открыть/закрыть боковую панель и изменить цвет иконки
    menuIcon.addEventListener('click', () => {
      sidebar.classList.toggle('open');
      overlay.classList.toggle('active');
      menuIcon.classList.toggle('open'); // Добавляем/убираем класс для изменения цвета иконки
    });

    // Закрыть боковую панель при клике вне ее области
    overlay.addEventListener('click', () => {
      sidebar.classList.remove('open');
      overlay.classList.remove('active');
      menuIcon.classList.remove('open'); // Убираем класс для изменения цвета иконки
    });

    // Закрыть боковую панель при клике на ссылку внутри нее (опционально)
    const sidebarLinks = document.querySelectorAll('#sidebar .nav-link');
    sidebarLinks.forEach(link => {
      link.addEventListener('click', () => {
        sidebar.classList.remove('open');
        overlay.classList.remove('active');
        menuIcon.classList.remove('open'); // Убираем класс для изменения цвета иконки
      });
    });
  </script>
</body>
</html>
Run HTML

Что изменилось:

  1. Цвет иконки меню:

    • По умолчанию иконка имеет черный цвет (color: #000).

    • При добавлении класса open к #menuIcon цвет иконки меняется на белый (color: #fff).

  2. JavaScript:

    • При открытии или закрытии боковой панели добавляется или удаляется класс open у #menuIcon.

    • Это позволяет динамически изменять цвет иконки.

  3. CSS:

    • Добавлены стили для изменения цвета иконки в зависимости от наличия класса open.

Как это работает:

  • Иконка меню по умолчанию черная.

  • При открытии боковой панели иконка становится белой.

  • При закрытии панели иконка снова становится черной.

Этот подход обеспечивает визуальную обратную связь для пользователя, показывая состояние боковой панели через цвет иконки. Если нужно что-то доработать, дайте знать! 😊

4 / 4
добавить к иконке #menuIcon left: 190px; когда открыто меню и когда меню закрыто #menuIcon left: вернуть поумолчанию

Чтобы добавить смещение иконки меню (#menuIcon) вправо на 190px, когда меню открыто, и вернуть её в исходное положение, когда меню закрыто, можно использовать JavaScript для изменения свойства left иконки. Вот обновленный пример:

Пример: Смещение иконки меню при открытии/закрытии боковой панели

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Sidebar with Menu Icon Offset</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome for Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    #sidebar {
      width: 250px;
      height: 100vh;
      background-color: #343a40;
      color: #fff;
      position: fixed;
      left: -250px; /* Скрыто по умолчанию */
      top: 0;
      transition: transform 0.3s;
      z-index: 1000;
    }

    #sidebar.open {
      transform: translateX(250px); /* Открыто */
    }

    #menuIcon {
      position: fixed;
      left: 10px; /* По умолчанию */
      top: 10px;
      font-size: 24px;
      cursor: pointer;
      z-index: 1001;
      transition: left 0.3s, color 0.3s; /* Анимация для left и цвета */
    }

    #menuIcon .fas {
      color: #000; /* Черный цвет по умолчанию */
    }

    #menuIcon.open .fas {
      color: #fff; /* Белый цвет при открытой панели */
    }

    #content {
      padding: 20px;
      transition: margin-left 0.3s;
    }

    /* Затемнение фона при открытом меню */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    #overlay.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- Overlay для закрытия меню -->
  <div id="overlay"></div>

  <!-- Иконка меню -->
  <div id="menuIcon">
    <i class="fas fa-bars"></i>
  </div>

  <!-- Sidebar -->
  <div id="sidebar">
    <div class="p-3">
      <h4>Sidebar</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div id="content">
    <h1>Main Content</h1>
    <p>This is the main content area. Click the menu icon to open the sidebar.</p>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <!-- Custom JS -->
  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const menuIcon = document.getElementById('menuIcon');

    // Открыть/закрыть боковую панель, изменить цвет и смещение иконки
    menuIcon.addEventListener('click', () => {
      sidebar.classList.toggle('open');
      overlay.classList.toggle('active');
      menuIcon.classList.toggle('open'); // Добавляем/убираем класс для изменения цвета иконки

      // Смещение иконки меню
      if (sidebar.classList.contains('open')) {
        menuIcon.style.left = '190px'; // Смещение вправо при открытии
      } else {
        menuIcon.style.left = '10px'; // Возврат в исходное положение при закрытии
      }
    });

    // Закрыть боковую панель при клике вне ее области
    overlay.addEventListener('click', () => {
      sidebar.classList.remove('open');
      overlay.classList.remove('active');
      menuIcon.classList.remove('open'); // Убираем класс для изменения цвета иконки
      menuIcon.style.left = '10px'; // Возврат в исходное положение
    });

    // Закрыть боковую панель при клике на ссылку внутри нее (опционально)
    const sidebarLinks = document.querySelectorAll('#sidebar .nav-link');
    sidebarLinks.forEach(link => {
      link.addEventListener('click', () => {
        sidebar.classList.remove('open');
        overlay.classList.remove('active');
        menuIcon.classList.remove('open'); // Убираем класс для изменения цвета иконки
        menuIcon.style.left = '10px'; // Возврат в исходное положение
      });
    });
  </script>
</body>
</html>
Run HTML

Что изменилось:

  1. Смещение иконки меню:

    • При открытии боковой панели иконка смещается вправо на 190px с помощью изменения свойства left.

    • При закрытии панели иконка возвращается в исходное положение (left: 10px).

  2. Анимация:

    • Добавлено свойство transition: left 0.3s для плавного перемещения иконки.

  3. JavaScript:

    • При открытии или закрытии панели изменяется свойство left иконки меню.

Как это работает:

  • Иконка меню по умолчанию находится в положении left: 10px.

  • При открытии боковой панели иконка смещается вправо на 190px.

  • При закрытии панели иконка возвращается в исходное положение.

Этот подход добавляет визуальную интерактивность и улучшает пользовательский опыт. Если нужно что-то доработать, дайте знать! 😊

10 / 10
New chat
DeepThink (R1)
Search
AI-generated, for reference only