Метод 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!