Giuliomax Menu Builder
| 开发者 | giuliomax |
|---|---|
| 更新时间 | 2026年5月19日 17:42 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Giuliomax Menu Builder lets you create fully customized navigation menus and embed them anywhere using the
[menux] shortcode. Build your menu visually from the WordPress admin, style it with 20 preset themes or full manual controls, and it works perfectly on desktop, tablet and mobile.
Starting from v2.3, it ships a complete Mega Menu system — a feature typically locked behind premium plugins — for free.
✨ Main Features
- Visual menu builder — drag-and-drop interface to add pages, custom links, icons, badges, notification dots and submenus up to 3 levels
- Page + custom link support — use existing WP pages or external URLs, with target controls and role visibility
- Advanced item targeting — show/hide items by user role, login state, device, current page, schedule, time range or UTM source
- Menu location assignment — tag items for Primary, Footer, Sidebar or Mobile and render with
[menux location="..."] - 20 preset themes — professionally designed themes with one-click apply and live preview: Ghost, Void Dark, Indigo Pulse, Aurora Night, Navy Command, Tropical Bloom, Evergreen, Cyber Matrix, Rose Silk, Sky Fresh, Newspaper Ink, Dev Dark, Ocean Electric, Violet Cloud, Swiss Pro, Cosmic Dusk, Warm Honey, Cloud Glass, Carbon Pro, Aegean Teal
- Responsive mobile menu — automatic fit-based breakpoint or manual pixel threshold
- 4 mobile opening modes — Dropdown, Fullscreen overlay, Drawer left, Drawer right
- Hamburger style controls — Classic, Modern or Minimal icon appearance, alignment and colors
- Link shape — configurable border-radius for pill-style or sharp links
- Sticky header — fixed menu on scroll with background, shadow, alignment, shrink and auto-hide behavior
- Scroll progress bar — page reading indicator that works on sticky or normal menus
- Dark mode support — Light, Dark or Auto (follows OS preference)
- Typography & layout — Google Fonts, fallback font, size, weight, letter spacing, text transform and items alignment
- Link animations — hover effects like Lift, Scale, Pulse, Bounce, Shake, Glow and Underline
- Entrance animations — Fade, Slide, Zoom, Flip with duration, delay and stagger controls
- Submenu styling — background, border, link color, shadow and animation controls
- Logo support — add and position a logo image directly inside the menu bar
- WP Menu Integration — intercept classic theme
wp_nav_menu()calls and replace them with MenuX output - Import / Export — save and restore menu configurations as JSON
- Full reset — one-click button to delete all saved items, styles and settings
- Multilingual ready — WPML, Polylang and TranslatePress support with language-specific item labels
- Live preview — real-time desktop/tablet/mobile preview while building the menu
- Up to 4 columns per panel, each independently sized (% width or auto)
- 5 column item types: clickable links, section headings, dividers, images, and arbitrary shortcodes / Gutenberg blocks
- Icon + description on link items — give users context at a glance (e.g. "Dashboard — Analytics & reports")
- Icon on headings — visually group sections with a Font Awesome icon
- Click-to-pick icon picker — browse and search Font Awesome 6 Free icons directly from the editor; no class names to remember
- Drag & drop reordering of items within each column
- Independent per-item toggle — enable Mega Menu on one or multiple nav items independently
- Full-width panel that anchors to the navigation container, not to the individual link
- Gradient backgrounds — 12 ready-made gradient presets (Dark, Purple, Indigo, Sky, Teal, Emerald, Sunset, Rose, Gold, Charcoal…) plus a custom gradient builder with direction, two color pickers and live apply
- Panel appearance controls — padding, column gap, border radius, font size, link color, heading color, accent color
- Smooth hover — 200 ms grace timer ensures the panel never disappears when moving the mouse from the trigger link to the panel content
- Mobile-aware — collapses inline on small screens, or can be disabled on mobile entirely
- 6 demo templates — one-click starting points to get up and running in seconds:
- SaaS Product (4 cols, dark gradient — Features, Docs, Company, CTA)
- E-Commerce (3 cols, white — Categories, Deals, Account)
- Creative Agency (3 cols, purple gradient — Services, Portfolio, Studio)
- News & Blog (3 cols, light — Topics, Sections, Connect)
- Corporate (3 cols, sky gradient — Solutions, Industries, Company)
- Restaurant (3 cols, warm gradient — Menu, Locations, Reserve)
- Toggleable live preview — click "👁 Preview" in the editor toolbar to see an approximation of the panel below the editor, without leaving the page
- Colors: background (solid or gradient), links, hover state (solid or gradient), active state (solid or gradient), submenus, hamburger
- Typography: Google Fonts, font family, size, weight, letter spacing, text transform
- Layout: gap, horizontal padding, vertical padding, items alignment, link border-radius
- Mobile: breakpoint, opening mode, overlay color/opacity/blur, drawer width, open animation
- Sticky: background, shadow, padding, alignment, transition, shrink effect, auto-hide on scroll
- Mega Menu: background (solid or gradient), padding, gap, radius, font size, link color, heading color, accent color, mobile behavior
- Go to Giuliomax Menu Builder in the WordPress admin sidebar
- Build your menu items using the visual drag-and-drop builder
- Apply a preset theme or configure colors and style manually
- To add a Mega Menu: go to the Mega Menu tab, enable it on a nav item, click Edit Columns, add columns and items
- Place
[menux]in any page, post, widget or template
- 📊 Click statistics — track which items users click, by device, role and date
- 🔍 Search bar — instant full-text search modal with keyboard navigation
- ♿ Accessibility panel — WCAG 2.1 tools (focus outline, skip link, reduced motion, high contrast, ARIA labels)
- 🎨 Custom CSS — write your own CSS rules directly from the admin panel
- 📄 Multiple menus — create and manage independent menu configurations for different pages or locations
安装:
- Upload the plugin folder to
/wp-content/plugins/ - Activate the plugin from Plugins → Installed Plugins
- Go to MenuX in the admin menu
- Build your menu and copy the shortcode
[menux] - Paste
[menux]wherever you want the menu to appear
- WordPress 5.8 or higher
- PHP 7.4 or higher
屏幕截图:
常见问题:
How do I display the menu?
Use the shortcode [menux] in any page, post, widget or block. For multiple locations on the same site use [menux location="footer"] etc. and assign items to that location in the builder.
Can I have different menus for different pages?
Not in the free version. Use role-based visibility or per-item device/page conditionals to adapt the menu per context. Full multiple-menu support is available in the Pro version.
Does it work with page builders?
Yes. You can insert [menux] as a shortcode block in Gutenberg, Elementor, Divi, WPBakery and most other builders.
Does it work with caching plugins?
Yes. The menu HTML is generated server-side and compatible with WP Rocket, LiteSpeed Cache, W3 Total Cache and similar plugins.
How do I add Font Awesome icons?
In the menu builder, each item has an icon field. Type the FA class name, e.g. fa-solid fa-house, or use the 🎨 Pick button to browse and search icons visually. Font Awesome 6 Free is loaded automatically.
Is it compatible with WPML / Polylang / TranslatePress?
Yes. This plugin automatically detects installed multilingual plugins and lets you set a label per language for each menu item.
Where is the mobile breakpoint?
Go to MenuX → Style → Mobile and set your preferred pixel breakpoint, or choose Auto to detect based on available space. Default is 768px.
How do I use the preset themes?
In the admin panel click Choose Theme (top bar). Browse the 20 preset themes, hover to preview and click Apply to try one live. Click Apply & Close to keep it, or Cancel to revert.
How does the Mega Menu work?
Go to the Mega Menu tab, enable the toggle next to a first-level nav item, then click Edit Columns. Add up to 4 columns, fill them with headings, links (with icon and description), dividers, images or shortcodes, then click Save columns. Not sure where to start? Hit ✨ Demo to load one of 6 ready-made templates.
Does the WP Menu Integration work with all themes?
It works with classic PHP themes that call wp_nav_menu() directly (e.g. GeneratePress, OceanWP, Neve, Kadence). Themes that use a custom header builder (e.g. Astra Header Builder) bypass wp_nav_menu() internally, so the integration cannot intercept them — use the shortcode approach instead.
Can I reset everything and start fresh?
Yes. Go to MenuX → Tools → Reset Everything and confirm. This permanently deletes all menu items, styles and integration settings.
Can I use custom CSS?
Custom CSS editing is available in the Pro version. In the free version you can target the .menux-container wrapper and its child elements from your theme's stylesheet.
更新日志:
2.3.6
- Mega Menu editor: preview panel moved below the column editor and hidden by default — toggle via the new "👁 Preview" button in the toolbar, giving columns full horizontal space
- Added 6 demo templates for the Mega Menu editor (SaaS, E-Commerce, Agency, Blog, Corporate, Restaurant) — each loads a full column layout with headings, icons and descriptions in one click via the new "✨ Demo" toolbar button
- Fixed icon picker appearing behind the mega menu item edit form (z-index corrected)
- Fixed multi-item mega menu: enabling mega on more than one nav item now works reliably (POST structure changed from positional index to item_key)
- Fixed mega panel disappearing when moving the mouse from the trigger link to the panel — replaced CSS
:hoverwith a JS 200 ms grace timer
- Mega Menu: added gradient background picker with 12 presets and custom gradient builder
- Mega Menu: added font size, link color, heading color and accent/icon color controls
- Mega Menu: default mobile behavior changed to "disabled on mobile"
- Mega Menu: icon picker (click to browse Font Awesome 6 Free) added to all item types that support icons
- Mega Menu: drag & drop reordering of items within columns
- Mega Menu: added icon support on heading items
- Mega Menu: removed column separator lines for a cleaner layout
- Mega Menu: added font size setting for the mega panel
- Introduced Mega Menu — full-width column panels for first-level nav items (free)
- Up to 4 columns per panel with 5 item types: link, heading, divider, image, shortcode
- Link items support icon (Font Awesome) + description text
- Panel appearance: background color, padding, column gap, border radius
- Full-width panel anchored to the nav container (CSS specificity fix)
- Mobile: mega panel collapses inline below the trigger link
- Added 20 professionally designed preset themes with one-click apply and live preview
- Added link border-radius (pill/rounded shape) style control
- Added submenu background, border, link color, shadow and animation controls
- Added WP Menu Integration panel (replaces classic theme wp_nav_menu() calls)
- Added full Reset button (deletes all items, styles and settings)
- Fixed hamburger alignment — now correctly uses margin-based horizontal positioning
- Fixed live preview not applying border-radius, hover/active backgrounds
- Fixed preset theme apply not correctly setting radio button fields (mobile mode, entrance animation, dark mode)
- Fixed form validation errors on hidden number inputs (novalidate)
- Fixed gradient fields not saving or rendering on frontend
- Default items alignment changed to Right (flex-end)
- Default mobile opening mode changed to Fullscreen on all preset themes
- Removed Custom CSS textarea from the Style panel to comply with WordPress.org plugin guidelines
- Removed ipapi.co external call (click-tracking country detection is a Pro-only feature)
- Updated External Services documentation in readme
- Initial release of Giuliomax Menu Builder
- Includes all core features: builder, 4 mobile modes, sticky, scroll progress bar, entrance animations, import/export, multilingual