/** * BS Accessible Menu — Base Styles * * Handles show/hide and positioning only. * Colors, typography, and layout are left to the theme. */ /* ============================================================================ Reset ========================================================================== */ .bs-accessible-menu ul { list-style: none; margin: 0; padding: 0; } /* ============================================================================ Toggle button reset ========================================================================== */ .bs-accessible-menu .bs-menu-toggle { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: inherit; font: inherit; line-height: inherit; /* Minimum touch target — WCAG 2.5.8 */ min-width: 44px; min-height: 44px; } /* ============================================================================ Arrow indicator ========================================================================== */ .bs-menu-arrow { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; vertical-align: middle; margin-left: 4px; pointer-events: none; transition: transform 0.2s ease; } .bs-menu-toggle[aria-expanded="true"] .bs-menu-arrow { transform: rotate( 180deg ); } /* ============================================================================ Submenus — classic absolute positioning ========================================================================== */ .bs-accessible-menu .menu-item-has-children { position: relative; } .bs-accessible-menu .sub-menu { display: none; position: absolute; z-index: 100; min-width: 200px; background: #fff; box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.12 ); } .bs-accessible-menu li.bs-menu-open > .sub-menu { display: block; } .bs-accessible-menu > ul > li > .sub-menu { top: 100%; left: 0; } .bs-accessible-menu .sub-menu li > .sub-menu { top: 0; left: 100%; } /* ============================================================================ Mobile — hamburger button ============================================================================ JS inserts the button immediately before the nav in the DOM. No positioning set here: the button inherits its position from the surrounding layout, exactly where it is in the document flow. The theme can style .bs-hamburger freely. The .bs-mobile-enhanced class is added to by JS only when the mobile enhancement is active — progressive enhancement: if JS is unavailable, the original nav remains visible on all viewports. ========================================================================== */ .bs-hamburger { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 10px; color: inherit; font: inherit; min-width: 44px; min-height: 44px; } /* Hide hamburger on desktop — must come after the base rule. */ @media ( min-width: 960px ) { .bs-hamburger { display: none; } } /* Hide the original nav on mobile only when JS is active. */ @media ( max-width: 959px ) { .bs-mobile-enhanced nav.bs-accessible-menu:not( .bs-mobile-menu ) { display: none; } } .bs-hamburger-icon { display: flex; flex-direction: column; gap: 5px; width: 22px; pointer-events: none; } .bs-hamburger-icon span { display: block; width: 100%; height: 2px; background-color: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } /* Animate hamburger → X when open. */ .bs-hamburger[aria-expanded="true"] .bs-hamburger-icon span:nth-child(1) { transform: translateY( 7px ) rotate( 45deg ); } .bs-hamburger[aria-expanded="true"] .bs-hamburger-icon span:nth-child(2) { opacity: 0; } .bs-hamburger[aria-expanded="true"] .bs-hamburger-icon span:nth-child(3) { transform: translateY( -7px ) rotate( -45deg ); } /* ============================================================================ Mobile dialog ============================================================================ Panel from the right by default. Override in theme to reposition or restyle. ========================================================================== */ dialog.bs-mobile-dialog { border: none; padding: 0; position: fixed; inset: 0; width: 85vw; max-width: 360px; height: 100%; max-height: 100%; margin: 0 0 0 auto; overflow-y: auto; box-shadow: -4px 0 16px rgba( 0, 0, 0, 0.2 ); } dialog.bs-mobile-dialog::backdrop { background: rgba( 0, 0, 0, 0.5 ); } /* ============================================================================ Dialog close button ========================================================================== */ .bs-dialog-close { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; font-size: 3rem; color: inherit; margin-left: auto; margin-bottom: 2rem; }