hexo-theme-halunhaku
Version:
A modern, responsive Hexo theme with enhanced code blocks, perfect cover images, and Chinese text optimization. Production-ready with mobile-first design.
67 lines (62 loc) • 2.85 kB
JavaScript
// Mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
// Toggle mobile menu
mobileMenuButton.addEventListener('click', function() {
const isHidden = mobileMenu.classList.contains('hidden');
if (isHidden) {
mobileMenu.classList.remove('hidden');
// Change hamburger to X icon
mobileMenuButton.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
} else {
mobileMenu.classList.add('hidden');
// Change X back to hamburger icon
mobileMenuButton.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
`;
}
});
// Close mobile menu when clicking outside
document.addEventListener('click', function(event) {
if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
`;
}
});
// Close mobile menu when clicking on a menu item
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
mobileMenuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
`;
});
});
// Close mobile menu on window resize (when switching to desktop)
window.addEventListener('resize', function() {
if (window.innerWidth >= 768) { // md breakpoint
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
`;
}
});
}
});