Valbar Accessible Menu Widget for Elementor
| 开发者 | valentynabaranova |
|---|---|
| 更新时间 | 2026年7月10日 17:29 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- Native Elementor widget under its own Valbar Accessible Menu category.
- Pick any registered WordPress menu from a dropdown.
- Horizontal layout: hover dropdowns on desktop, fullscreen burger overlay on mobile.
- Vertical layout: an always-visible stacked list with expanded submenus and no burger, ideal for footers.
- Optional per-item icon (Font Awesome or uploaded SVG) with configurable position, size, spacing, and color.
- Hover dropdowns kept open by an invisible bridge, with a configurable gap from the main menu.
- Animated burger button toggling a fullscreen mobile overlay.
- Collapsible submenus on mobile with auto-generated toggle buttons.
- Accessibility-friendly:
aria-expanded,aria-controls,aria-label, andEscapeto close. - Body scroll lock while the mobile menu is open.
- Rich style controls: link colors, typography, item spacing, dropdown styling, item icon, burger colors, and the mobile panel background.
- Live preview inside the Elementor editor.
- No build step required, plain CSS and vanilla JavaScript.
- WordPress 5.8 or higher
- PHP 7.4 or higher
- Elementor 3.5 or higher
安装:
- Make sure Elementor is installed and active.
- In your WordPress admin, go to Plugins → Add New and search for "Valbar Accessible Menu Widget for Elementor", or upload the plugin ZIP via Plugins → Add New → Upload Plugin.
- Activate Valbar Accessible Menu Widget for Elementor.
- Create at least one menu under Appearance → Menus.
- Edit a page or template with Elementor, search for Valbar Accessible Menu in the widgets panel, and drag it onto the canvas.
屏幕截图:
常见问题:
Does this plugin require Elementor?
Yes. The plugin registers an Elementor widget, so Elementor must be installed and active. If Elementor is missing, the plugin shows an admin notice and does nothing else.
Does it work with Elementor free or only Elementor Pro?
It works with the free version of Elementor. Elementor Pro is not required.
Which menu does it display?
Any menu you create under Appearance → Menus. You select the menu from a dropdown inside the widget.
Can I use it in a footer?
Yes. Drop the widget into a footer or any narrow column and set the Layout to Vertical. The burger is disabled, items stack into a column, and submenus are shown as an expanded, indented list.
Can I add icons to menu items?
Yes. You can set an optional Font Awesome icon or uploaded SVG that appears next to every top-level menu item, and control its position, size, spacing, and color.
Is the mobile menu accessible?
Yes. The burger button uses aria-expanded, aria-controls, and an aria-label, the navigation has an aria-label, the overlay can be closed with the Escape key, and body scrolling is locked while the menu is open.
Can I change the mobile breakpoint?
The mobile breakpoint is 1024px, defined in both the stylesheet (media query) and the script (BREAKPOINT constant). You can adjust it with custom code or override styles using the BEM class names (rnm-menu, rnm-menu__nav, rnm-menu__burger, etc.).
更新日志:
- Improved active/current menu item styling for dropdown links.
- Minor style control refinements.
- Initial release.