// Header shrink on scroll
window.addEventListener('scroll', function() {
const header = document.querySelector('.site-header');
if (window.scrollY > 50) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
});
// Dropdown keyboard accessibility
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('#main-menu ul.menu > li.menu-item');
menuItems.forEach(item => {
const link = item.querySelector('a');
const dropdown = item.querySelector('ul.children');
// Open dropdown on focus
link.addEventListener('focus', () => {
if(dropdown) {
dropdown.style.opacity = '1';
dropdown.style.visibility = 'visible';
dropdown.style.transform = 'translateY(0)';
}
});
// Close dropdown when focus leaves
const allLinks = item.querySelectorAll('a');
allLinks[allLinks.length - 1].addEventListener('blur', () => {
if(dropdown) {
dropdown.style.opacity = '';
dropdown.style.visibility = '';
dropdown.style.transform = '';
}
});
// Navigate submenu with arrow keys
if(dropdown) {
const submenuLinks = dropdown.querySelectorAll('a');
link.addEventListener('keydown', e => {
if(e.key === 'ArrowDown') {
e.preventDefault();
submenuLinks[0].focus();
}
});
submenuLinks.forEach((sublink, index) => {
sublink.addEventListener('keydown', e => {
if(e.key === 'ArrowDown') {
e.preventDefault();
if(index < submenuLinks.length - 1) submenuLinks[index + 1].focus();
}
if(e.key === 'ArrowUp') {
e.preventDefault();
if(index > 0) submenuLinks[index - 1].focus();
else link.focus();
}
if(e.key === 'Escape') {
link.focus();
if(dropdown) {
dropdown.style.opacity = '';
dropdown.style.visibility = '';
dropdown.style.transform = '';
}
}
});
});
}
});
});
