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:
      		php bin\magento setup:upgrade
      		

    • 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
      		php bin/magento setup:static-content:deploy
      		

  • 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:

    <div class="video_megamenu" style=""><iframe src="http://player.vimeo.com/video/41286259?title=0&byline=0&portrait=0" id="fitvid402488"></iframe></div>
    
    • Backend of ‘Media Element 1’ in the ‘Column 2’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="media_elements">      <div class="media_detail1">              <ul class="media-list">                                            <li class="media"><a href="#" class="pull-right"><img src="{{media url="sm/megamenu/images/01_menu.jpg"}}" alt="" width="70" class="img-thumbnail media-object"></a>                                                <div class="media-body">                                                    <p>Lorem Ipsum beschikbaar heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde</p>                                                </div>                                            </li>                                            <li class="media"><a href="#" class="pull-right"><img src="{{media url="sm/megamenu/images/02_menu.jpg"}}" alt="" width="70" class="img-thumbnail media-object"></a>                                                <div class="media-body">                                                    <p>Er zijn vele variaties van passages maar van in een of andere vorm, door ingevoegde humor of willekeu seloofwaardig ogen.</p>                                                </div>                                            </li>                                        </ul>       </div></div>
    
    • Backend of ‘Google Map’ in the ‘Column 3’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="google_map_1"><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:202px;width:370px;"><div id="gmap_canvas" style="height:202px;width:370px;"></div><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(21.0277644,105.83415979999995),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(21.0277644, 105.83415979999995)});infowindow = new google.maps.InfoWindow({content:"<b>Ha Noi</b><br/>Thai Ha Street<br/> Ha Noi City" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window,"load", init_map);</script></div>
    
    • Backend of ‘Element Text 1’ in the ‘Column 4’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="element_text_1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged, ...</p></div>
    
    • Backend of ‘Element Text 2’ in the ‘Column 5’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="element_text_2"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, ...</p></div>
    
    • Backend of ‘Element Text 3’ in the ‘Column 6’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="element_text_1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, ...</p></div>
    

    Features
    Frontend Appearance

    • Backend Settings: Please click Here to view.

    Copy and paste the following code into the content editor:

    <div class="megamenu-dropdown"><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Layouts</li><li><a title="Layout 1" href="#">Layout 1</a></li><li><a title="Layout 2" href="#">Layout 2</a></li><li><a title="Layout 3" href="#">Layout 3</a></li>                <li><a title="Layout 4" href="#">Layout 4</a></li>                <li><a title="Layout 5" href="#">Layout 5</a></li>                <li><a title="Layout 6" href="#">Layout 6</a></li></ul> <ul class="item-home-megamenu color"><li class="title-megamenu-home">Color Styles</li><li class="pink"><a title="Pink" href="#"><img src="{{media url="sm/megamenu/images/color/pink.png"}}" alt="Pink" />Pink</a></li>                <li class="orange"><a title="Orange" href="#"><img src="{{media url="sm/megamenu/images/color/orange.png"}}" alt="Orange" />Orange</a></li>                <li class="purple"><a title="Purple" href="#"><img src="{{media url="sm/megamenu/images/color/purple.png"}}" alt="Purple" />Purple</a></li>                 <li class="red"><a title="Red" href="#"><img src="{{media url="sm/megamenu/images/color/red.png"}}" alt="Red" />Red</a></li>                <li class="royal-blue"><a title="Royal Blue" href="#"><img src="{{media url="sm/megamenu/images/color/royal-blue.png"}}" alt="Royal Blue" />Royal Blue</a></li>                <li class="salmon"><a title="Salmon" href="#"><img src="{{media url="sm/megamenu/images/color/salmon.png"}}" alt="Salmon" />Salmon</a></li>                <li class="silver"><a title="Silver" href="#"><img src="{{media url="sm/megamenu/images/color/silver.png"}}" alt="Silver" />Silver</a></li>               <li class="taupe"><a title="Taupe" href="#"><img src="{{media url="sm/megamenu/images/color/taupe.png"}}" alt="Taupe" />Taupe</a></li>               <li class="white"><a title="White" href="#"><img src="{{media url="sm/megamenu/images/color/white.png"}}" alt="White" />White</a></li>               <li class="yellow"><a title="Yellow" href="#"><img src="{{media url="sm/megamenu/images/color/yellow.png"}}" alt="Yellow" />Yellow</a></li></ul><ul class="item-home-megamenu header"><li class="title-megamenu-home">Headers</li><li><a title="Header Type 1" href="#">Header Type 1</a></li><li><a title="Header Type 2" href="#">Header Type 2</a></li><li><a title="Header Type 3" href="#">Header Type 3</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Product Detail Layouts</li><li><a title="Product Detail - Full" href="#">Product Detail - Full</a></li><li><a title="Product Detail - Left Sidebar" href="#">Product Detail - Left Sidebar</a></li><li><a title="Product Detail - Right Sidebar" href="#">Product Detail - Right Sidebar</a></li><li><a title="Thumbnail  - Vertical" href="#">Thumbnail  - Vertical</a></li><li><a title="Thumbnail - Horizontal" href="#">Thumbnail - Horizontal</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Zoom Types</li><li><a title="Product Page Inner Zoom" href="#">Product Page Inner Zoom</a></li><li><a title="Product Page Outer Zoom" href="#">Product Page Outer Zoom</a></li><li><a title="Product Page Lens Zoom" href="#">Product Page Lens Zoom</a></li></ul><div style="clear:both;"></div><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Listing Layouts</li><li><a title="Without Sidebar" href="#">Without Sidebar</a></li><li><a title="Left Sidebar" href="#">Left Sidebar</a></li><li><a title="Right Sidebar" href="#">Right Sidebar</a></li><li><a title="Left - Right Sidebar" href="#">Left - Right Sidebar</a></li><li><a title="2 Columns Products" href="#">2 Columns Products</a></li><li><a title="3 Columns Products" href="#">3 Columns Products</a></li><li><a title="4 Columns Products" href="#">4 Columns Products</a></li><li><a title="5 Columns Products" href="#">5 Columns Products</a></li><li><a title="6 Columns Products" href="#">6 Columns Products</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">About Us Layouts</li><li><a title="About Us Style 1" href="#">About Us Style 1</a></li><li><a title="About Us Style 2" href="#">About Us Style 2</a></li><li><a title="About Us Style 3" href="#">About Us Style 3</a></li><li><a title="About Us Style 4" href="#">About Us Style 4</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Contact Us Layouts</li><li><a title="Contact Us Style 1" href="#">Contact Us Style 1</a></li><li><a title="Contact Us Style 2" href="#">Contact Us Style 2</a></li><li><a title="Contact Us Style 3" href="#">Contact Us Style 3</a></li><li><a title="Contact Us Style 4" href="#">Contact Us Style 4</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">404 Page Layout</li><li><a title="404 Page Style 1" href="#">404 Page Style 1</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Effect Hover Product</li><li><a title="Simple" href="#">Simple</a></li><li><a title="Display Second Image" href="#">Display Second Image</a></li><li><a title="Display Slider Image" href="#">Display Slider Image</a></li></ul></div>
    		

    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:

    <div class="static-category">     <div class="image-cat-st">          <a title="Men" href="#"><img src="{{media url="sm/megamenu/images/men-image-menu.jpg"}}" alt="Men" /></a>     </div>     <div class="title-cat-st">          <h2><a title="Men" href="#">Men</a></h2>     </div>     <div class="des-cat-st">         <p>Veritatis officia expedita excepteur labore etiam leo class</p>     </div></div>
    
    • Backend of ‘Static Women’ in the ‘Column 2’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="static-category"><div class="image-cat-st"><a title="Women & Accessories" href="#"><img src="{{media url="sm/megamenu/images/women-image-menu.jpg"}}" alt="Women & Accessories" /></a></div><div class="title-cat-st"><h2><a title="Women & Accessories" href="#">Women & Accessories</a></h2></div><div class="des-cat-st"><p>Morbi laboriosam recusandae iure</p></div></div>
    
    • Backend of ‘Static Out Door & Sports’ in the ‘Column 3’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="static-category"><div class="image-cat-st"><a title="Out Door & Sports" href="#"><img src="{{media url="sm/megamenu/images/sport-image-menu.jpg"}}" alt="Out Door & Sports" /></a></div><div class="title-cat-st"><h2><a title="Out Door & Sports" href="#">Out Door & Sports</a></h2></div><div class="des-cat-st"><p>Veritatis officia expedita excepteur labore etiam leo class</p></div></div>
    
    • Backend of ‘Health Care Devices’ in the ‘Column 4’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="static-category"><div class="image-cat-st"><a title="Health Care Devices" href="#"><img src="{{media url="sm/megamenu/images/health-image-menu.jpg"}}" alt="Health Care Devices" /></a></div><div class="title-cat-st"><h2><a title="Health Care Devices" href="#">Health Care Devices</a></h2></div><div class="des-cat-st"><p>Phasellus semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    
    • Backend of ‘Home & Kitchen’ in the ‘Column 5’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="static-category"><div class="image-cat-st"><a title="Home & Kitchen" href="#"><img src="{{media url="sm/megamenu/images/home-kitchen-image-menu.jpg"}}" alt="Home & Kitchen" /></a></div><div class="title-cat-st"><h2><a title="Home & Kitchen" href="#">Home & Kitchen</a></h2></div><div class="des-cat-st"><p>Semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    
    • Backend of ‘Fishing’ in the ‘Column 6’: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="static-category"><div class="image-cat-st"><a title="Fishing" href="#"><img src="{{media url="sm/megamenu/images/fishing-image-menu.jpg"}}" alt="Fishing" /></a></div><div class="title-cat-st"><h2><a title="Fishing" href="#">Fishing</a></h2></div><div class="des-cat-st"><p>Phasellus semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    

    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:

    <div class="envato-sublv-3"><ul><li class="psd-tuts">PSD Tuts</li><li class="code-tuts">CODE Tuts</li></ul></div>
    
    • 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:

    <ul class="dropdown-menu">
                                <li>
                                    <form id="contact1" action="#" name="contactform" method="post">
                                        <div class="field_input contact_field-1">
                                            <input type="text" name="name" id="name1" class="form-control" placeholder="Name">
                                            <input type="text" name="email" id="email1" class="form-control" placeholder="Email">
                                        </div>
                                        <div class="field_input contact_field-2">
                                            <input type="text" name="phone" id="phone1" class="form-control" placeholder="Phone">
                                            <input type="text" name="subject" id="subject1" class="form-control" placeholder="Subject">
                                        </div>
                                        <div class="clearfix"></div>
                                        <div class="field_input contact_field-3">
                                            <textarea class="form-control" name="comments" id="comments1" rows="6" placeholder="Your Message ..."></textarea>
                                        </div>
                                        <div class="field_input contact_field-4">
                                            <div class="pull-right-contact send">
                                                <input type="submit" value="SEND" id="submit1" class="btn btn-primary small">
                                            </div>
                                        </div>
                                    </form>
                                </li>
                            </ul>
    
    

    Shop By Product
    Frontend Appearance

    • Backend Settings: Please click Here to view.

    Copy and paste the following code into the content:

    <div class="megamenu-dropdown-2">
    <ul class="item-home-megamenu icon">
    <li><a title="Desktop Icon" href="#"><i class="fa fa-desktop"></i>Desktop Icon</a></li>
    <li><a title="Laptop Icon" href="#"><i class="fa fa-laptop"></i>Laptop Icon</a></li>
    <li><a title="Tablet Icon" href="#"><i class="fa fa-tablet"></i>Tablet Icon</a></li>
    <li><a title="Mobile Icon" href="#"><i class="fa fa-mobile"></i>Mobile Icon</a></li>
    <li><a title="Android Icon" href="#"><i class="fa fa-android"></i>Android Icon</a></li>
    <li><a title="Apple Icon" href="#"><i class="fa fa-apple"></i>Apple Icon</a></li>
    <li><a title="Windows Icon" href="#"><i class="fa fa-windows"></i>Windows Icon</a></li>
    <li><a title="Linux Icon" href="#"><i class="fa fa-linux"></i>Linux Icon</a></li>
    </ul>
    <ul class="item-home-megamenu icon"><li>
    <a title="Leaf Icon" href="#"><i class="fa fa-leaf"></i>Leaf Icon</a></li>
    <li><a title="Hear Icon" href="#"><i class="fa fa-heart-o"></i>Hear Icon</a></li>
    <li><a title="Sun Icon" href="#"><i class="fa fa-sun-o"></i>Sun Icon</a></li>
    <li><a title="Moon Icon" href="#"><i class="fa fa-moon-o"></i>Moon Icon</a></li>
    <li><a title="Camera Icon" href="#"><i class="fa fa-camera-retro"></i>Camera Icon</a></li>
    <li><a title="Bars Icon" href="#"><i class="fa fa-bars"></i>Bars Icon</a></li>
    <li><a title="Pagelines Icon" href="#"><i class="fa fa-pagelines"></i>Pagelines Icon</a></li>
    <li><a title="Ambulance Icon" href="#"><i class="fa fa-ambulance"></i>Ambulance Icon</a></li>
    </ul>
    <ul class="item-home-megamenu icon">
    <li><a title="Beer Icon" href="#"><i class="fa fa-beer"></i>Beer Icon</a></li>
    <li><a title="Code Icon" href="#"><i class="fa fa-code"></i>Code Icon</a></li>
    <li><a title="Envelope Icon" href="#"><i class="fa fa-envelope-o"></i>Envelope Icon</a></li>
    <li><a title="Bitbucket Icon" href="#"><i class="fa fa-bitbucket-square"></i>Bitbucket Icon</a></li>
    <li><a title="Globe Icon" href="#"><i class="fa fa-globe"></i>Globe Icon</a></li>
    <li><a title="Skype Icon" href="#"><i class="fa fa-skype"></i>Skype Icon</a></li>
    <li><a title="Github Icon" href="#"><i class="fa fa-github"></i>Github Icon</a></li>
    <li><a title="Renren Icon" href="#"><i class="fa fa-renren"></i>Renren Icon</a></li>
    </ul>
    <div class="clear_item_megamenu"></div>
    <div class="element_shop_product-1"><p>Font Awesome gives you scalable vector icons that can instantly be customized ai??i?? size, color, drop shadow, and anything that can be done with the power of CSS.</p></div>
    <div class="element_shop_product-2"><p>Font Awesome font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a> Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p></div>
    </div>
    

    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

    ×