This documentation provides an in-depth look at a custom-built overlay menu system developed using HTML, CSS, and JavaScript, embedded within Bricks Builder via its code widget. If you’re building websites with Bricks Builder and want to enhance your navigation experience, this guide will walk you through a high-performance, accessible, and mobile-friendly solution.
This isn’t just a simple menu; it’s a technically robust system that prioritizes performance, accessibility, progressive enhancement, and a fantastic user experience.
Why This Menu is a Cut Above the Rest
In today’s digital landscape, navigation is often the first interaction users have with your website. A great menu needs to be visually appealing, function seamlessly across devices, and be accessible to all users. This system is designed with:
- Performance Optimization – The menu is built with GSAP animations and efficient CSS, ensuring minimal impact on page load time. It uses optimized JavaScript and event delegation techniques to keep execution fast and smooth.
- Progressive Enhancement – Even if a visitor has JavaScript disabled, the menu still functions at a basic level using pure CSS transitions and accessible HTML.
- Full Accessibility – Keyboard navigation is fully supported, with ARIA attributes ensuring compatibility with screen readers.
- Mobile-First Approach – Designed to prioritize mobile interactions while still providing an elegant desktop experience.
HTML Structure
This menu system consists of three key components:
- The Hamburger Button – The trigger that toggles the menu open and closed, featuring three spans for animation effects.
- The Menu Overlay – A full-screen background that appears when the menu is active, enhancing visibility and focus.
- The Menu Content Container – Holds the navigation links, ensuring accessibility and a structured, easy-to-navigate layout.
Example Usage
<button class="burger-button" aria-expanded="false" aria-controls="menu-overlay">
<span></span>
<span></span>
<span></span>
</button>
CSS Components
Styling the Hamburger Button
The hamburger button is fixed in the top-right corner with a high z-index to keep it visible above other content. It features hover and active states to provide clear user feedback. If needed, you can customize its size, colors, and animation speed.
.burger-button {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
width: 50px;
height: 50px;
cursor: pointer;
}
Menu Overlay Styling
The menu overlay acts as a full-screen backdrop and smoothly transitions into view when activated.
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
}
Menu Content Styling
Designed for smooth scrolling and an elegant look, the menu content area is fully responsive and hides the scrollbar for a clean UI.
.menu-content {
overflow-y: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 20px;
}
JavaScript Functionality
GSAP Animation System
Animations define how elements enter and exit the screen. GSAP ensures smooth, high-performance transitions.
const menuTL = gsap.timeline({
paused: true,
onStart: () => {
document.body.style.overflow = "hidden";
},
onReverseComplete: () => {
document.body.style.overflow = "auto";
}
});
Handling User Events
Click events, keyboard navigation, and focus trapping enhance the usability of the menu, ensuring a smooth experience for all users.
function handleFocusTrap(e) {
// Keeps keyboard focus within the menu when open
}
Controlling Menu Visibility on Desktop and Mobile
By default, the menu appears on all devices, but you can control its visibility using CSS or Bricks Builder’s Style tab.
Hiding the Menu on Desktop via CSS
@media (min-width: 1024px) {
.burger-button, .menu-overlay, .menu-content {
display: none;
}
}
Using Bricks Builder’s Style Tab
- Select the code widget containing the menu.
- Navigate to the Style tab.
- Under Display Settings, set visibility to hidden for desktop while keeping it visible on mobile and tablet.
- Save and preview your site to confirm changes.
Integrating with Bricks Builder
Embedding the Menu
Add the custom menu within Bricks Builder by inserting the following shortcode:
<?php echo do_shortcode('[bricks_template id="XXXX"]'); ?>
Customizing Bricks Elements
Ensure Bricks components within the menu match your website’s design.
.menu-content .brxe-block,
.menu-content .brxe-container,
.menu-content .brxe-section {
color: #fff;
opacity: 0;
transform: translateY(20px);
}
Advanced Features
Accessibility Implementation
- ARIA attributes ensure screen reader compatibility.
- Focus trapping keeps keyboard users within the menu while open.
Scroll Management
- The page scroll is disabled when the menu is open and restored on close.
- Mobile scrolling remains fluid, ensuring ease of use.
Performance Optimization
Enhancing Animation Performance
GSAP animations are hardware-accelerated, ensuring smooth transitions without lag.
Efficient Resource Management
- CSS selectors are optimized for fast rendering.
- JavaScript event delegation reduces unnecessary event listeners.
Customization Options
Styling Adjustments
You can easily change:
- Colors, sizes, typography, and spacing.
- Animation speeds and easing functions.
Functional Modifications
- Adjust animation timing.
- Modify mobile breakpoints.
- Change how interactions behave.
Conclusion
This custom-built overlay menu system is a powerful and flexible solution for Bricks Builder websites. By focusing on performance, accessibility, and maintainability, this menu provides an enhanced user experience with smooth animations, full keyboard support, and seamless mobile optimization. Whether you’re designing for desktop or mobile, this system ensures reliable and scalable navigation.
