SM Mega Menu

This guide will help you install SM Mega Menu step by step.

1REQUIREMENT

At the basic level, this module will require the following condition:

  • Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
  • Composer (latest stable version)
  • Apache 2.2 or late
  • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
  • In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

  • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
  • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
  • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt
    • 1. Please type the following command into the dialog to clear the compiled code and cache:
    • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
  • Step 4: Go to Administration page to configure the extension
  • Important Note:

    • After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
    • You should disable all caches in cache management in the installation and configuration process.

3CONFIGURATION

3.1 SET UP

Log in to Admin, go to SM Mega Menu then create list Menu Items. The following guide is step by step to create list Menu Items for your menu:

  • STEP 1: ADD MENU GROUP
  • STEP 2: CREATE MENU ITEMS IN THE GROUP
  • To creat menu items in the group, In the Admin Panel you go to Menu Manager>> Mega Menu Demo 1 >>Edit.

    Go to Menu Items to create Item

    You can refer case of Menu which likes as our demo

    3.2 HORIZONTAL MEGA MENU

    3.2.1 Horizontal Megamenu:

    • Sortable Categories Items Please click Here to view.

    All Mega Menu
    Frontend Appearance

    • Backend Settings: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′

    • Backend of ‘Add Contents Video’ in the ‘Column 1′: Please click Here to view.

    Note: The item named ‘Add Media Element’, ‘Add Google Map’, ‘Text 1′, ‘Text 2′, ‘Text 3′ having same menu level (Level 3) as item ‘Add Contents Video’ could have the same configuration. However, you should be aware that the Parent Item of them is different.

    • Backend of ‘Video 1′ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Media Element 1′ in the ‘Column 2′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Google Map’ in the ‘Column 3′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 1′ in the ‘Column 4′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 2′ in the ‘Column 5′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 3′ in the ‘Column 6′: Please click Here to view.

    Copy and paste the following code into the content:

    Features
    Frontend Appearance

    • Backend Settings: Please click Here to view.

    Copy and paste the following code into the content editor:

    All Category
    Frontend Appearance

    • Backend Settings: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′

    • Backend of ‘Women’ in the ‘Column 1′: Please click Here to view.

    Note: The item named ‘Men’, ‘Accessories’, ‘Home & Decor’, ‘Sale’, ‘Vip’ having same menu level (Level 4) as item ‘Women’ could have the same configuration. However, you should be aware that the Parent Item of them is different.

    • Backend of ‘New Arrivals’ in the ‘Women’: Please click Here to view.

    Note: The item named ‘Tops & Blouses’, ‘Pants & Denim’, ‘Dresses & Skirts’ in ‘Column 1′, ‘Shirts’, ‘Tea, Knits and Polos’, ‘Pants & Denim’, ‘Blazers’ in ‘Column 2′, ‘Eyewear’, ‘Jewelry’, ‘Shoes’, ‘Bags & Luggage’ in ‘Column 3′, ‘Books & Music’, ‘Bed & Bath’, ‘Electronics’, ‘Decorative Accents’ in ‘Column 4′, ‘Women’, ‘Men’, ‘Accessories’, ‘Home & Decor’ in ‘Column 5′, ‘Beauty & Health’, ‘Mind & Body’, ‘Yoga & Pilates’, ‘Hair & Makeup’, ‘Lose Weight’ in ‘Column 6′ having same menu level (Level 4) as item ‘Women’ could have the same configuration. However, you should be aware that the Parent Item of them is different.

    Best Seller
    Frontend Appearance

    • Backend Settings: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′

    • Backend of ‘Static Men’ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Static Women’ in the ‘Column 2′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Static Out Door & Sports’ in the ‘Column 3′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Health Care Devices’ in the ‘Column 4′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Home & Kitchen’ in the ‘Column 5′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Fishing’ in the ‘Column 6′: Please click Here to view.

    Copy and paste the following code into the content:

    Flyout
    Frontend Appearance

    • Backend Settings: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.
    • Backend of ‘ThemeForest’: Please click Here to view.

    Note: Do the same with item ‘GraphicRiver’, ‘PhotoDune’, ‘Creattica’, ‘MicroLancer’, ‘ActiveDen’

    • Backend of ‘Column 1′ in the ‘EnvatoSites’: Please click Here to view.
    • Backend of ‘Tuts+’ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘We are Envato’ in the ‘Column 1′: Please click Here to view.
    • Backend of ‘Support Center’ in the ‘Column 1′: Please click Here to view.

    Grid
    Frontend Appearance

    • Backend Settings: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.
    • Backend of ’1 column’ in the ‘Column 1′: Please click Here to view.
    • Backend of ’5 column’ in the ‘Column 1′: Please click Here to view.
    • Backend of ‘Column 2′: Please click Here to view.
    • Backend of ’2 column’ in the ‘Column 2′: Please click Here to view.
    • Backend of ’4 column’ in the ‘Column 2′: Please click Here to view.
    • Backend of ‘Column 3′: Please click Here to view.
    • Backend of ’3 column’ in the ‘Column 3′: Please click Here to view.
    • Backend of ‘Column 4′: Please click Here to view.
    • Backend of ’4 column’ in the ‘Column 4′: Please click Here to view.

    Note: Do the same with item ’2 Column’

    • Backend of ‘Column 5′: Please click Here to view.
    • Backend of ’5 column’ in the ‘Column 5′: Please click Here to view.

    Note: Do the same with item 1 Column’

    • Backend of ‘Column 6′: Please click Here to view.
    • Backend of ’2 column’ in the ‘Column 6′: Please click Here to view.
    • Backend of ‘Column 7′: Please click Here to view.
    • Backend of ’1 column’ in the ‘Column 7′: Please click Here to view.

    Contact Form
    Frontend Appearance

    • Backend Settings: Please click Here to view.

    Copy and paste the following code into the content:

    Shop By Product
    Frontend Appearance

    • Backend Settings: Please click Here to view.

    Copy and paste the following code into the content:

    3.2.2 Configuration:

    The parameters are divided into the following groups:

    • General Settings
    • Advanced Settings

    General settings

    • Enable Extensions - Allow to enable/disable the module.
    • Select Mega Menu - Allow to choose Mega Menu
    • Select Template - We support 2 templates for presenting of menu (Horizontal and Vertical)
    • Select Effect - We support effects for Mega menu (CSS/Animation/Toggle)
    • Start Level - Level to start rendering the Menu at
    • End Level - Level to end rendering the Menu at

    ADVANCE SETTING

    • Caching - Allow to choose to cache the content of module.

    4SUPPORT

    Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System