Упрощение навигации в AdminLTE 3: закрытие меню при нажатии элемента

Метод 1: использование JavaScript и jQuery
Один из способов добиться желаемого поведения — использование JavaScript и jQuery. Привяжите событие щелчка к каждому элементу меню и запускайте действие закрытия меню при возникновении события. Вот пример фрагмента кода:

$(document).ready(function() {
  $('.sidebar-menu').find('li').on('click', function() {
    $('.sidebar').removeClass('open');
  });
});

Метод 2: использование встроенных функций AdminLTE
AdminLTE 3 предоставляет встроенную функцию под названием pushMenu(), которую можно использовать для переключения меню. Мы можем использовать эту функцию, чтобы закрывать меню при нажатии на пункт меню. Вот пример:

$(document).ready(function() {
  $('.sidebar-menu').find('li').on('click', function() {
    var $menu = $(this).closest('.sidebar');
    $menu.addClass('sidebar-closed');
    setTimeout(function() {
      $menu.removeClass('sidebar-closed');
    }, 500);
  });
});

Метод 3: CSS-переходы и анимация
Другой подход — использовать CSS-свойства перехода и анимации, чтобы добавить эффект плавного закрытия меню. Мы можем добавить класс в меню при нажатии на пункт меню и определить стили перехода и анимации в CSS. Вот пример:

<style>
  .sidebar-closed {
    transition: width 0.3s ease;
    animation: closeMenu 0.3s;
  }
  @keyframes closeMenu {
    0% {
      width: 100%;
    }
    100% {
      width: 0;
    }
  }
</style>
<script>
  $(document).ready(function() {
    $('.sidebar-menu').find('li').on('click', function() {
      var $menu = $(this).closest('.sidebar');
      $menu.addClass('sidebar-closed');
      setTimeout(function() {
        $menu.removeClass('sidebar-closed');
      }, 300);
    });
  });
</script>

В этой статье мы рассмотрели три способа закрытия меню навигации в AdminLTE 3 при нажатии на пункт меню. Используя JavaScript и jQuery, используя встроенные функции AdminLTE или реализуя переходы и анимацию CSS, вы можете улучшить взаимодействие с пользователем и сделать навигацию более интуитивно понятной. Выберите метод, который лучше всего соответствует требованиям и предпочтениям вашего проекта, и наслаждайтесь созданием потрясающих панелей администратора с помощью AdminLTE 3!