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
|
||||
);
|
||||
|
||||
// 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
|
||||
wp_enqueue_style(
|
||||
'hvac-navigation-fix',
|
||||
HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-fix.css',
|
||||
array('hvac-navigation-enhanced', 'hvac-consolidated-core'),
|
||||
array('hvac-design-system', 'hvac-components'),
|
||||
$this->version
|
||||
);
|
||||
|
||||
|
|
@ -368,14 +360,6 @@ class HVAC_Scripts_Styles {
|
|||
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
|
||||
wp_enqueue_script(
|
||||
|
|
|
|||
Loading…
Reference in a new issue