fix: navigation dropdowns now work with actual menu structure
- Removed duplicate enhanced navigation files (hvac-navigation-enhanced.js/css) - Verified existing hvac-menu-system.js handles hamburger menu correctly - Dropdown functionality confirmed working with Events, Certificates, Profile menus - CSS harmonization complete with proper responsive design - All navigation components now use consistent styling and animations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ben
parent
7b75dc5522
commit
d0eabe8ab0
3 changed files with 1 additions and 626 deletions
|
|
@ -1,394 +0,0 @@
|
||||||
/**
|
|
||||||
* HVAC Navigation Enhanced
|
|
||||||
* Professional dropdown navigation with smooth animations and best practices
|
|
||||||
*
|
|
||||||
* @version 2.0.0
|
|
||||||
* @since 2025-08-21
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ===== BASE NAVIGATION STRUCTURE ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu-wrapper {
|
|
||||||
background: #ffffff;
|
|
||||||
border-bottom: 2px solid #f0f0f0;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1000;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-nav {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== MAIN MENU ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
gap: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu > .menu-item {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== MENU LINKS ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item > a {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 18px 16px;
|
|
||||||
color: #374151;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover effect with bottom border */
|
|
||||||
.hvac-trainer-menu .menu-item > a::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 3px;
|
|
||||||
background: var(--hvac-primary-500, #0274be);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item > a:hover::after,
|
|
||||||
.hvac-trainer-menu .menu-item.current-menu-item > a::after {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item > a:hover {
|
|
||||||
color: var(--hvac-primary-500, #0274be);
|
|
||||||
background: rgba(2, 116, 190, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== DROPDOWN TOGGLE ARROWS ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item-has-children > a {
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item-has-children > a::before {
|
|
||||||
content: '▾';
|
|
||||||
position: absolute;
|
|
||||||
right: 12px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 12px;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item-has-children:hover > a::before,
|
|
||||||
.hvac-trainer-menu .menu-item-has-children.menu-open > a::before {
|
|
||||||
transform: translateY(-50%) rotate(180deg);
|
|
||||||
color: var(--hvac-primary-500, #0274be);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide Astra's toggle buttons - we use CSS hover instead */
|
|
||||||
.hvac-trainer-menu .ast-menu-toggle {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== DROPDOWN MENUS ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
min-width: 220px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
||||||
padding: 8px 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show dropdown on hover */
|
|
||||||
.hvac-trainer-menu .menu-item-has-children:hover > .sub-menu {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown menu items */
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 20px;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sliding hover effect for dropdown items */
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 3px;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--hvac-primary-500, #0274be);
|
|
||||||
transform: translateX(-3px);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a:hover {
|
|
||||||
color: var(--hvac-primary-500, #0274be);
|
|
||||||
background: rgba(2, 116, 190, 0.05);
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a:hover::before {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== ICONS IN MENU ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu .dashicons {
|
|
||||||
margin-right: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== SPECIAL MENU ITEMS ===== */
|
|
||||||
|
|
||||||
/* Help menu positioned to the right */
|
|
||||||
.hvac-trainer-menu .hvac-help-menu-item {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .hvac-help-menu-item > a {
|
|
||||||
padding: 18px 12px;
|
|
||||||
min-width: 44px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .hvac-help-menu-item .dashicons {
|
|
||||||
margin-right: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Current/active menu items */
|
|
||||||
.hvac-trainer-menu .current-menu-item > a,
|
|
||||||
.hvac-trainer-menu .current-menu-ancestor > a {
|
|
||||||
color: var(--hvac-primary-500, #0274be);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== MOBILE NAVIGATION ===== */
|
|
||||||
|
|
||||||
.hvac-hamburger-menu {
|
|
||||||
display: none;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-hamburger-line {
|
|
||||||
display: block;
|
|
||||||
width: 25px;
|
|
||||||
height: 2px;
|
|
||||||
background: #374151;
|
|
||||||
margin: 6px 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hamburger animation */
|
|
||||||
.hvac-hamburger-menu.active .hvac-hamburger-line:nth-child(1) {
|
|
||||||
transform: rotate(45deg) translate(5px, 5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-hamburger-menu.active .hvac-hamburger-line:nth-child(2) {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-hamburger-menu.active .hvac-hamburger-line:nth-child(3) {
|
|
||||||
transform: rotate(-45deg) translate(7px, -6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.hvac-hamburger-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #ffffff;
|
|
||||||
border-top: 1px solid #e5e7eb;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
||||||
max-height: calc(100vh - 60px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu > .menu-item {
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid #f3f4f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item > a {
|
|
||||||
padding: 16px 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item > a::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile dropdowns */
|
|
||||||
.hvac-trainer-menu .menu-item-has-children > a::before {
|
|
||||||
content: '▾';
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu {
|
|
||||||
position: static;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background: #f9fafb;
|
|
||||||
display: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .menu-item-has-children.menu-open > .sub-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a {
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hvac-trainer-menu .sub-menu .menu-item > a:hover {
|
|
||||||
padding-left: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== ACCESSIBILITY ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu a:focus {
|
|
||||||
outline: 2px solid var(--hvac-primary-500, #0274be);
|
|
||||||
outline-offset: 2px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Skip to content link */
|
|
||||||
.skip-link:focus {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
z-index: 10000;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background: var(--hvac-primary-500, #0274be);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== LOADING STATE ===== */
|
|
||||||
|
|
||||||
.hvac-trainer-menu.loading {
|
|
||||||
opacity: 0.5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== ANIMATION KEYFRAMES ===== */
|
|
||||||
|
|
||||||
@keyframes slideDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== OVERRIDE THEME CONFLICTS ===== */
|
|
||||||
|
|
||||||
/* Ensure our styles take precedence over Astra theme */
|
|
||||||
.hvac-page-wrapper .hvac-trainer-menu a,
|
|
||||||
.hvac-plugin-page .hvac-trainer-menu a {
|
|
||||||
box-shadow: none !important;
|
|
||||||
text-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove any unwanted theme button styles */
|
|
||||||
.hvac-trainer-menu button.ast-menu-toggle {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure dropdowns work without JavaScript */
|
|
||||||
.hvac-trainer-menu .menu-item-has-children:hover > .sub-menu,
|
|
||||||
.hvac-trainer-menu .menu-item-has-children:focus-within > .sub-menu {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
@ -1,215 +0,0 @@
|
||||||
/**
|
|
||||||
* HVAC Navigation Enhanced JavaScript
|
|
||||||
* Handles mobile menu toggle and improves accessibility
|
|
||||||
*
|
|
||||||
* @version 2.0.0
|
|
||||||
* @since 2025-08-21
|
|
||||||
*/
|
|
||||||
|
|
||||||
jQuery(document).ready(function($) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Cache DOM elements
|
|
||||||
const $hamburger = $('.hvac-hamburger-menu');
|
|
||||||
const $menu = $('.hvac-trainer-menu');
|
|
||||||
const $menuItems = $('.hvac-trainer-menu .menu-item-has-children');
|
|
||||||
const $body = $('body');
|
|
||||||
|
|
||||||
// Mobile menu toggle
|
|
||||||
$hamburger.on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
$(this).toggleClass('active');
|
|
||||||
$menu.toggleClass('active');
|
|
||||||
$body.toggleClass('menu-open');
|
|
||||||
|
|
||||||
// Update aria attributes for accessibility
|
|
||||||
const isOpen = $menu.hasClass('active');
|
|
||||||
$(this).attr('aria-expanded', isOpen);
|
|
||||||
$menu.attr('aria-hidden', !isOpen);
|
|
||||||
|
|
||||||
// Trap focus when menu is open
|
|
||||||
if (isOpen) {
|
|
||||||
$menu.find('a:first').focus();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mobile dropdown toggle
|
|
||||||
if (window.innerWidth <= 992) {
|
|
||||||
$menuItems.each(function() {
|
|
||||||
const $item = $(this);
|
|
||||||
const $link = $item.children('a');
|
|
||||||
|
|
||||||
// Add click handler to parent link on mobile
|
|
||||||
$link.on('click', function(e) {
|
|
||||||
// If it has children, prevent navigation and toggle menu
|
|
||||||
if ($item.hasClass('menu-item-has-children')) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
// Close other open menus
|
|
||||||
$menuItems.not($item).removeClass('menu-open');
|
|
||||||
|
|
||||||
// Toggle this menu
|
|
||||||
$item.toggleClass('menu-open');
|
|
||||||
|
|
||||||
// Update aria attributes
|
|
||||||
const isOpen = $item.hasClass('menu-open');
|
|
||||||
$(this).attr('aria-expanded', isOpen);
|
|
||||||
$item.children('.sub-menu').attr('aria-hidden', !isOpen);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Desktop dropdown enhancement with delay
|
|
||||||
let hoverTimeout;
|
|
||||||
|
|
||||||
if (window.innerWidth > 992) {
|
|
||||||
$menuItems.on('mouseenter', function() {
|
|
||||||
const $this = $(this);
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
|
|
||||||
// Close other dropdowns
|
|
||||||
$menuItems.not($this).removeClass('menu-open');
|
|
||||||
|
|
||||||
// Open this dropdown with slight delay
|
|
||||||
hoverTimeout = setTimeout(function() {
|
|
||||||
$this.addClass('menu-open');
|
|
||||||
}, 100);
|
|
||||||
}).on('mouseleave', function() {
|
|
||||||
const $this = $(this);
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
|
|
||||||
// Close dropdown with delay
|
|
||||||
hoverTimeout = setTimeout(function() {
|
|
||||||
$this.removeClass('menu-open');
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Keep dropdown open when hovering over submenu
|
|
||||||
$('.hvac-trainer-menu .sub-menu').on('mouseenter', function() {
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
}).on('mouseleave', function() {
|
|
||||||
const $parent = $(this).closest('.menu-item-has-children');
|
|
||||||
hoverTimeout = setTimeout(function() {
|
|
||||||
$parent.removeClass('menu-open');
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keyboard navigation
|
|
||||||
$menu.on('keydown', 'a', function(e) {
|
|
||||||
const $currentItem = $(this).parent();
|
|
||||||
let $targetItem;
|
|
||||||
|
|
||||||
switch(e.keyCode) {
|
|
||||||
case 37: // Left arrow
|
|
||||||
$targetItem = $currentItem.prev('.menu-item');
|
|
||||||
if ($targetItem.length) {
|
|
||||||
$targetItem.children('a').focus();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 39: // Right arrow
|
|
||||||
$targetItem = $currentItem.next('.menu-item');
|
|
||||||
if ($targetItem.length) {
|
|
||||||
$targetItem.children('a').focus();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 40: // Down arrow
|
|
||||||
if ($currentItem.hasClass('menu-item-has-children')) {
|
|
||||||
$currentItem.addClass('menu-open');
|
|
||||||
$currentItem.find('.sub-menu a:first').focus();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 38: // Up arrow
|
|
||||||
if ($currentItem.closest('.sub-menu').length) {
|
|
||||||
const $parentMenu = $currentItem.closest('.sub-menu').parent();
|
|
||||||
$parentMenu.children('a').focus();
|
|
||||||
$parentMenu.removeClass('menu-open');
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 27: // Escape
|
|
||||||
if ($currentItem.closest('.sub-menu').length) {
|
|
||||||
const $parentMenu = $currentItem.closest('.sub-menu').parent();
|
|
||||||
$parentMenu.children('a').focus();
|
|
||||||
$parentMenu.removeClass('menu-open');
|
|
||||||
} else if ($menu.hasClass('active')) {
|
|
||||||
$hamburger.click();
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 13: // Enter
|
|
||||||
case 32: // Space
|
|
||||||
if ($currentItem.hasClass('menu-item-has-children') && !$(this).attr('href')) {
|
|
||||||
$currentItem.toggleClass('menu-open');
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close mobile menu when clicking outside
|
|
||||||
$(document).on('click', function(e) {
|
|
||||||
if (!$(e.target).closest('.hvac-trainer-menu-wrapper').length) {
|
|
||||||
if ($menu.hasClass('active')) {
|
|
||||||
$hamburger.removeClass('active');
|
|
||||||
$menu.removeClass('active');
|
|
||||||
$body.removeClass('menu-open');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close mobile menu on escape key
|
|
||||||
$(document).on('keydown', function(e) {
|
|
||||||
if (e.keyCode === 27 && $menu.hasClass('active')) {
|
|
||||||
$hamburger.click();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle window resize
|
|
||||||
let resizeTimer;
|
|
||||||
$(window).on('resize', function() {
|
|
||||||
clearTimeout(resizeTimer);
|
|
||||||
resizeTimer = setTimeout(function() {
|
|
||||||
if (window.innerWidth > 992) {
|
|
||||||
// Reset mobile menu state on desktop
|
|
||||||
$hamburger.removeClass('active');
|
|
||||||
$menu.removeClass('active');
|
|
||||||
$body.removeClass('menu-open');
|
|
||||||
$menuItems.removeClass('menu-open');
|
|
||||||
}
|
|
||||||
}, 250);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Smooth scroll for anchor links
|
|
||||||
$menu.on('click', 'a[href^="#"]', function(e) {
|
|
||||||
const target = $(this.getAttribute('href'));
|
|
||||||
if (target.length) {
|
|
||||||
e.preventDefault();
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: target.offset().top - 100
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
// Close mobile menu after clicking
|
|
||||||
if ($menu.hasClass('active')) {
|
|
||||||
$hamburger.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add loaded class for CSS animations
|
|
||||||
setTimeout(function() {
|
|
||||||
$('.hvac-trainer-menu-wrapper').addClass('loaded');
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
|
|
@ -294,19 +294,11 @@ class HVAC_Scripts_Styles {
|
||||||
$this->version
|
$this->version
|
||||||
);
|
);
|
||||||
|
|
||||||
// Load enhanced navigation styles
|
|
||||||
wp_enqueue_style(
|
|
||||||
'hvac-navigation-enhanced',
|
|
||||||
HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-enhanced.css',
|
|
||||||
array('hvac-design-system', 'hvac-components'),
|
|
||||||
$this->version
|
|
||||||
);
|
|
||||||
|
|
||||||
// Load navigation fix with high priority
|
// Load navigation fix with high priority
|
||||||
wp_enqueue_style(
|
wp_enqueue_style(
|
||||||
'hvac-navigation-fix',
|
'hvac-navigation-fix',
|
||||||
HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-fix.css',
|
HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-fix.css',
|
||||||
array('hvac-navigation-enhanced', 'hvac-consolidated-core'),
|
array('hvac-design-system', 'hvac-components'),
|
||||||
$this->version
|
$this->version
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -368,14 +360,6 @@ class HVAC_Scripts_Styles {
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
// Enhanced navigation functionality
|
|
||||||
wp_enqueue_script(
|
|
||||||
'hvac-navigation-enhanced',
|
|
||||||
HVAC_PLUGIN_URL . 'assets/js/hvac-navigation-enhanced.js',
|
|
||||||
array('jquery'),
|
|
||||||
$this->version,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
|
|
||||||
// Mobile responsive functionality
|
// Mobile responsive functionality
|
||||||
wp_enqueue_script(
|
wp_enqueue_script(
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue