Use Mega Menu with Drop Down and Static Block to Improve E-Store Experience
Offering customers with improved UX has always been a prime aspect for the online stores. It is very essential to put a friendly & easy navigational structure to allow the customers to reach out to their desire product or services. Over the time the navigation pattern has undergone major up gradation. From the simple static global navigation, where buttons on the bar would redirect to another page or additional list of menus to the cascading dynamic dropdown menus, where hovers over one of the items in that menu shows another menu with yet more options to get one level deeper.
What’s New?Now it has been time to get into Mega. These are the large navigation panel that appears on hover over global navigation bar. Unlike the flyout menus these allows you to move your mouse from one option to the next without any fear of pesky disappearing act. Talking about the most efficient e-commerce solution, Magento which is running the largest number of online stores has a facilitator “Mega Menu with Drop Down and Static Block” to bring a better user experience to their customers. Mega Menu with Drop Down and Static Block is a Magento extension that allows you to manage site navigation structure by categories & subcategories. This extension is available for Magento Open Source community edition.
Highlights of Mega Menu with Drop Down and Static Block
- Facility to manage display of all subcategories only or along with products
- Support Top – Horizontal and Side – Vertical menu display navigation
- Configuration for setting Fade in/out and Slide up/down animation effect
- Manage number of subcategories & products
- Manage text, description , images, static block on top and bottom section of menu
Advantages by Mega Menu into your Magento Store
- Great beneficiary for bigger sites who are using regular drop-down menus typically hide most of the user’s options.
- Make it easy to use icons and pictures when appropriate to have better visual impact among customers
- Navigation choices are structured through layout, typography, and (sometimes) icons
- Administrator can manage the extension as per the Magento Store View
- JQuery library inclusion avoids JQuery conflict
Steps for Configuring the Mega Menu with Drop Down and Static Block
- Enable/Disable option for the extension
- Configure Top/Side menu settings with animation timings
- Add frontend display – Subcategories & Products limitations
Mega Menu Management
- Add Menu title, select store view & display order
- Menu Selection – Type, Category, Subcategories Display Mode
- Manage top & bottom content information – Text & images
Best practices for Mega Menu
- Hover Over Interaction: Menu should appear after the user’s cursor has rested on the corresponding global navigation button for 0.5 seconds
- Management of White Space: Important to be thoughtful about the number, granularity and labeling of navigation options at each level.
- Imagery Illustrations: Use of icons or illustrations in mega menus will help users make navigation decisions.
- Distinct Design: Mega menu needs to have strong visual border to give a visually distinct impression to the users.