diff --git a/assets/css/hvac-navigation-simple.css b/assets/css/hvac-navigation-simple.css new file mode 100644 index 00000000..f1991924 --- /dev/null +++ b/assets/css/hvac-navigation-simple.css @@ -0,0 +1,178 @@ +/** + * HVAC Navigation - Simple & Robust + * Simplified navigation that ensures dropdowns work reliably + * + * @version 1.0.0 + * @since 2025-08-21 + */ + +/* Ensure the menu is visible when active */ +.hvac-trainer-menu.active { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +/* Hamburger menu button styling */ +.hvac-hamburger-menu { + display: flex !important; + flex-direction: column; + justify-content: center; + align-items: center; + width: 55px; + height: 54px; + background: none; + border: none; + cursor: pointer; + padding: 10px; + position: relative; + z-index: 1002; +} + +.hvac-hamburger-menu.active { + background: rgba(2, 116, 190, 0.1); + border-radius: 8px; +} + +/* Hamburger lines */ +.hvac-hamburger-line { + width: 25px; + height: 3px; + background: #374151; + margin: 2px 0; + transition: all 0.3s ease; + display: block; +} + +/* Menu toggle buttons (dropdown arrows) */ +.hvac-trainer-menu .menu-toggle { + display: flex !important; + align-items: center; + padding: 12px 16px !important; + cursor: pointer !important; + color: #374151; + font-size: 14px; + font-weight: 500; + user-select: none; + transition: all 0.2s ease; + background: none; + border: none; + width: 100%; + text-align: left; + justify-content: space-between; +} + +.hvac-trainer-menu .menu-toggle:hover { + background: rgba(2, 116, 190, 0.05); + color: #0274be; +} + +/* Ensure dropdown arrows are visible and clickable */ +.hvac-trainer-menu .dropdown-arrow { + font-size: 12px; + margin-left: auto; + color: #9ca3af; + transition: transform 0.3s ease; +} + +.hvac-trainer-menu .menu-item.open .dropdown-arrow, +.hvac-trainer-menu .menu-item.has-children:hover .dropdown-arrow { + transform: rotate(180deg); + color: #0274be; +} + +/* Submenu styling - simple and reliable */ +.hvac-trainer-menu .sub-menu { + background: #f9fafb; + border-left: 3px solid #e5e7eb; + margin: 0; + padding: 0; + list-style: none; + + /* Hidden by default */ + display: none; + max-height: 0; + overflow: hidden; + transition: all 0.3s ease; +} + +/* Show submenu when parent is open */ +.hvac-trainer-menu .menu-item.open > .sub-menu { + display: block !important; + max-height: 500px !important; + padding: 8px 0 !important; +} + +/* Submenu items */ +.hvac-trainer-menu .sub-menu .menu-item { + margin: 0; + padding: 0; +} + +.hvac-trainer-menu .sub-menu .menu-item > a { + display: block; + padding: 10px 20px 10px 30px; + color: #4b5563; + text-decoration: none; + font-size: 14px; + transition: all 0.2s ease; +} + +.hvac-trainer-menu .sub-menu .menu-item > a:hover { + color: #0274be; + background: rgba(2, 116, 190, 0.05); + padding-left: 35px; +} + +/* Force visibility on mobile when menu is active */ +@media (max-width: 992px) { + .hvac-trainer-menu { + position: static !important; + box-shadow: none !important; + background: white; + padding: 0; + margin: 0; + width: 100%; + } + + .hvac-trainer-menu.active { + display: block !important; + } + + .hvac-trainer-menu .menu-item { + border-bottom: 1px solid #e5e7eb; + } + + .hvac-trainer-menu .sub-menu { + position: static !important; + box-shadow: none !important; + border: none !important; + background: #f8fafc !important; + margin-left: 0 !important; + } +} + +/* Make sure everything is clickable */ +.hvac-trainer-menu .menu-toggle, +.hvac-trainer-menu .menu-item > a { + pointer-events: auto !important; + cursor: pointer !important; +} + +/* Override any theme conflicts */ +.hvac-plugin-page .hvac-trainer-menu, +.hvac-page-wrapper .hvac-trainer-menu { + font-family: inherit !important; + list-style: none !important; +} + +/* Ensure proper z-index stacking */ +.hvac-trainer-nav { + position: relative; + z-index: 1000; +} + +.hvac-trainer-menu { + position: relative; + z-index: 1001; +} \ No newline at end of file diff --git a/assets/js/hvac-navigation-robust.js b/assets/js/hvac-navigation-robust.js new file mode 100644 index 00000000..7629c3eb --- /dev/null +++ b/assets/js/hvac-navigation-robust.js @@ -0,0 +1,128 @@ +/** + * HVAC Navigation - Robust & Simple + * Ensures navigation dropdowns work reliably for all users + * + * @version 1.0.0 + * @since 2025-08-21 + */ + +jQuery(document).ready(function($) { + 'use strict'; + + console.log('HVAC Navigation: Robust navigation loading...'); + + // Ensure the menu system works even if other JavaScript fails + function initRobustNavigation() { + // Find all menu toggle elements + const $menuToggles = $('.hvac-trainer-menu .menu-toggle'); + + console.log('HVAC Navigation: Found', $menuToggles.length, 'menu toggles'); + + // Add click handlers to dropdown toggles + $menuToggles.off('click.hvacRobust').on('click.hvacRobust', function(e) { + e.preventDefault(); + e.stopPropagation(); + + const $this = $(this); + const $menuItem = $this.closest('.menu-item'); + const $submenu = $menuItem.find('> .sub-menu'); + + console.log('HVAC Navigation: Toggle clicked for', $this.text().trim()); + + // Close other open menus at the same level + $this.closest('ul').find('> .menu-item.open').not($menuItem).removeClass('open'); + + // Toggle this menu + $menuItem.toggleClass('open'); + + // Log the state + console.log('HVAC Navigation: Menu is now', $menuItem.hasClass('open') ? 'open' : 'closed'); + }); + + // Ensure hamburger menu works + const $hamburger = $('#hvac-hamburger-menu, .hvac-hamburger-menu'); + const $menu = $('#hvac-trainer-menu, .hvac-trainer-menu'); + + if ($hamburger.length && $menu.length) { + console.log('HVAC Navigation: Setting up hamburger menu'); + + $hamburger.off('click.hvacRobust').on('click.hvacRobust', function(e) { + e.preventDefault(); + e.stopPropagation(); + + console.log('HVAC Navigation: Hamburger clicked'); + + $hamburger.toggleClass('active'); + $menu.toggleClass('active'); + + // Update aria attributes + const isOpen = $menu.hasClass('active'); + $hamburger.attr('aria-expanded', isOpen); + + console.log('HVAC Navigation: Menu is now', isOpen ? 'active' : 'inactive'); + }); + } + + // Close menu when clicking outside (on mobile) + $(document).off('click.hvacRobustOutside').on('click.hvacRobustOutside', function(e) { + if (!$(e.target).closest('.hvac-trainer-nav').length) { + if (window.innerWidth <= 992) { + $menu.removeClass('active'); + $hamburger.removeClass('active'); + $hamburger.attr('aria-expanded', 'false'); + } + + // Close all open dropdowns + $('.hvac-trainer-menu .menu-item.open').removeClass('open'); + } + }); + + // Handle window resize + $(window).off('resize.hvacRobust').on('resize.hvacRobust', function() { + if (window.innerWidth > 992) { + // Reset mobile menu state on desktop + $menu.removeClass('active'); + $hamburger.removeClass('active'); + $hamburger.attr('aria-expanded', 'false'); + } + }); + + console.log('HVAC Navigation: Robust navigation initialized successfully'); + } + + // Initialize immediately + initRobustNavigation(); + + // Reinitialize after AJAX or dynamic content changes + $(document).on('hvac-content-updated', initRobustNavigation); + + // Fallback initialization after a delay + setTimeout(function() { + // Check if dropdowns are working + const $firstToggle = $('.hvac-trainer-menu .menu-toggle').first(); + if ($firstToggle.length) { + // Simulate a click to test functionality + const events = $._data($firstToggle[0], 'events'); + if (!events || !events.click || events.click.length === 0) { + console.log('HVAC Navigation: No click handlers found, reinitializing...'); + initRobustNavigation(); + } + } + }, 1000); + + // Extra safety net - ensure menu visibility + function ensureMenuVisibility() { + const $activeMenu = $('.hvac-trainer-menu.active'); + if ($activeMenu.length && $activeMenu.is(':hidden')) { + console.log('HVAC Navigation: Forcing menu visibility'); + $activeMenu.css({ + 'display': 'block', + 'visibility': 'visible', + 'opacity': '1' + }); + } + } + + // Check menu visibility periodically + setInterval(ensureMenuVisibility, 2000); +}); \ No newline at end of file diff --git a/includes/class-hvac-scripts-styles.php b/includes/class-hvac-scripts-styles.php index 6a34376c..1cce9308 100644 --- a/includes/class-hvac-scripts-styles.php +++ b/includes/class-hvac-scripts-styles.php @@ -294,10 +294,10 @@ class HVAC_Scripts_Styles { $this->version ); - // Load navigation fix with high priority + // Load simple navigation styles with high priority wp_enqueue_style( - 'hvac-navigation-fix', - HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-fix.css', + 'hvac-navigation-simple', + HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-simple.css', array('hvac-design-system', 'hvac-components'), $this->version ); @@ -360,6 +360,14 @@ class HVAC_Scripts_Styles { true ); + // Robust navigation functionality + wp_enqueue_script( + 'hvac-navigation-robust', + HVAC_PLUGIN_URL . 'assets/js/hvac-navigation-robust.js', + array('jquery'), + $this->version, + true + ); // Mobile responsive functionality wp_enqueue_script(