40 lines
No EOL
1.4 KiB
JavaScript
40 lines
No EOL
1.4 KiB
JavaScript
// Mobile Menu Functionality
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const mobileFab = document.getElementById('mobile-fab');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileFab && mobileMenu) {
|
|
// Toggle menu on FAB click
|
|
mobileFab.addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
mobileMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Add staggered animation to menu items
|
|
const menuItems = document.querySelectorAll('.mobile-menu-item');
|
|
menuItems.forEach((item, index) => {
|
|
item.style.transitionDelay = `${index * 0.05}s`;
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function (e) {
|
|
if (mobileMenu.classList.contains('active') &&
|
|
!mobileFab.contains(e.target) &&
|
|
!mobileMenu.contains(e.target)) {
|
|
mobileFab.classList.remove('active');
|
|
mobileMenu.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Add hover effect to menu items
|
|
menuItems.forEach(item => {
|
|
item.addEventListener('mouseenter', function () {
|
|
this.style.transform = 'translateX(-5px)';
|
|
});
|
|
|
|
item.addEventListener('mouseleave', function () {
|
|
this.style.transform = '';
|
|
});
|
|
});
|
|
}
|
|
});
|