WP Manifestindependent plugin directory
manifest / builders / md-menu

MD Menu

Professional navigation menu widget for Elementor

by Mazhenov.kz · github.com/diasmazhenov/md-menu · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/diasmazhenov/md-menu/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/diasmazhenov/md-menu ↗

MD Menu - Elementor Pro-like Navigation Widget for Free

Professional navigation menu widget for Elementor Free. Clones the Pro Nav Menu widget with advanced features like multiple layouts, pointer effects, and responsive support.

Features

✨ Three Layout Types

  • Horizontal navigation
  • Vertical menu
  • Dropdown menu

🎨 7 Pointer Effects

  • Underline
  • Overline
  • Double line
  • Framed border
  • Background highlight
  • Text color change
  • Custom styling

📱 Fully Responsive

  • Mobile-first approach
  • Adaptive layout switching
  • Touch-friendly

⚙️ Advanced Controls

  • Menu selection
  • Layout customization
  • Pointer effect styling
  • Submenu configuration
  • Animation options
  • Typography controls
  • Color management

Requirements

  • WordPress: 6.9+
  • PHP: 8.2+
  • Elementor: Free 4.0+

Installation

  1. Download the md-menu.zip file
  2. Go to WordPress Admin → Plugins → Add New
  3. Click "Upload Plugin" and select the zip file
  4. Activate the plugin
  5. Create/edit a page with Elementor
  6. Add "MD Menu" widget to your page
  7. Select a menu and customize

Usage

  1. Ensure you have a WordPress menu created (Appearance → Menus)
  2. Add the MD Menu widget to your Elementor page
  3. Select your menu from the dropdown
  4. Choose layout (Horizontal/Vertical/Dropdown)
  5. Select pointer effect style
  6. Customize colors and spacing as needed

File Structure

md-menu/
├── md-menu.php                 # Plugin entry point
├── assets/
│   ├── css/
│   │   └── md-menu.css        # Widget styles
│   └── js/
│       └── md-menu.js         # Widget interactions
└── widgets/
    └── md-menu-widget.php     # Elementor widget class

Development

CSS Architecture

  • Pure Flexbox layout (no CSS Grid)
  • BEM naming convention
  • Three distinct layout modes with specific flex-direction rules
  • Pointer effects using opacity transitions (no transform animations)

PHP Architecture

  • Elementor V3 Widget_Base API
  • Custom Walker_Nav_Menu for proper HTML structure
  • 16 Elementor controls across 5 sections
  • Sanitized output with WordPress escaping functions

Key Classes

  • MD_Menu_Walker - Custom menu walker for proper submenu structure
  • MD_Menu_Widget - Main Elementor widget class extending Widget_Base

Browser Support

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Mobile browsers (iOS Safari, Chrome Mobile)

Troubleshooting

Menu not showing?

  • Verify menu is assigned and has items
  • Check menu selection in widget settings

Layout looks wrong?

  • Clear Elementor cache: Elementor → Settings → Tools → Clear Cache
  • Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)

Submenus not visible?

  • Ensure parent container has overflow: visible
  • Check z-index conflicts with other elements

License

GPL v2 or later

Author

diasmazhenov