Mega Menu Documentation
A) Installation – top
Uploading
- Download the add-on
- Go to Admin panel > Add-ons > Manage Add-ons
- Click on [+] to open upload modal window
- Please choose whatever is comfortable to you:
– Local: zip archive is saved on your computer
– Server: zip archive is uploaded on your server
– URL: you have a direct link to the zip archive - After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install
Activation
- Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
[TH] Mega Menu - In Activation tab insert License key
- Save the settings and go back to Manage Add-ons page
- In same line with the name of the add-on, click Active
- Clear cache, choose Administration > Storage > Clear cache
Make sure that the add-on status is Active
That’s all, the add-on is installed
B) Change the color scheme – top
- Go to Admin panel > Add-ons > Manage Add-ons > [TH] Mega Menu
- After editing, save the changes by pressing Save
C) Mega menu – top
Create Mega Menu
- Go to Admin panel > Design > Menus
- Click on [+] to open “New menu” modal window
- Enter name and please click Create
- Select new menu
- Click on [+] to open “New item” modal window
The menu items of the 1st level have two types
- Full category tree (1) – display all categories and category banners
- Default – display menu items and submenu
Options:
- Display type – specifies how to display submenu
- Float right (9) – sets the alignment of the element on the right edge
- Icon (2) – the image for the menu item
- SVG Icon (2) – field to insert SVG code
The menu items of the 2nd level have two types
- Default (8) – menu items display as menu by default
- Text (7) – display wiziwig content
For example to create the menu item “Contacts”, follow these steps.
Create item “Contacts”, select
- Content type: default
- Display type: List
- Float right: selected
Create sub-item “Info”
- Parent element: Contacts
- Type of content: Text
- Custom CSS class: ath_mega-menu__contacts
In the visual editor, choose the mode “Code” and insert the following html:
<h4><i class="icon-tt-pin"></i> Address:</h4> <p>3993 Hanover Street, <br>New York, NY 10016 </p> <p><br> </p> <h4><i class="icon-tt-mail"></i> Email:</h4> <p><a href="mailto:sales@example.com">sales@example.com</a> </p> <p><br> </p> <h4><i class="icon-tt-phone"></i> Phone:</h4> <p>+1 917-722-7425 </p> <p>(free call) </p> <p><br> </p> <h4><i class="icon-tt-clock"></i> Opening hours</h4> <p>10:00 — 6:00 </p> <p>From Monday to Friday </p>
D) Category settings – top
Full category tree
It created automatically. Content is defined in the settings page, category
- Columns – amount of columns in menu
- Icon (3) – icon for the item in the menu
- SVG Icon (3) – field to insert SVG code
- Banner (5) – promotional banner for the first-level categories
- Banner URL – link for promo banner
- Images (4) – displays for 2nd and 3rd levels categories
E) Block settings – top
When the menu is ready, go to Admin panel > Design > Layouts and create Mega Menu block in the settings, select previously created menu
- Language and Currency –
- Focus on the menu – dims the entire site when you hover over menu
- Elements … – set amount of categories
- Category image width and height – sets the size of images for the category tree
- Category image on the left – adjusts the display images for 2nd level categories that have child elements. When it isn’t active, elements are displayed on top
Important! Mega menu for the main menu of the site, it is therefore recommended to use only one menu of this type.
F) Change styles – top
Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this
- Go to Design > Themes
- Press Visual Editor in front of the currently active layout
- In the new tab, you will see your shop with Theme editor panel
- In CUSTOMIZE selector choose Custom CSS
- In textarea your can add your styles
- After editing save your changes by pressing Save and press [X] to close editor
Changelog
4.08 (19 Nov 2019) Fixed bug for full width layouts 4.7 (04 Nov 2019) Added the ability to specify the position of the logo on the mobile view Added a button to select which devices to display the menu items, such as in blocks Search on mobile view is now immediately selected when opened For unauthorized users, you can leave only buttons in your account 4.6 (06 Sep 2019) Changes in styles (removed less lighten function) Improved display for categories with long name on mobile view Improved the display for categories with long name on the desktop for the view " full tree" 4.5 (11 Jul 2019) Fixed bug for option when the background is not full width 4.4 (28 Jun 2019) Added ability to select search display options for mobile view (drop-down/hidden in exit menu) Improved work with tablets Fixed bug for pending items Fixed bug for comparison list Added support of authorization via social networks Style fix 4.3 (10 Feb 2019) Fixed bug in hotel Corrections in the drop-down list 4.2 (01 Nov 2018) Removing the setting with the image pictures Fix for full width option 4.1 (15 Oct 2018) Changing language variables Added the ability to change the menu in the admin panel to support other companies (Unitheme) Update hotel The ability to change the back button on the category name for mobile view 3.6 (09 Jul 2018) Changes in js and styles Fixed third level menu display on phones 3.5 (04 Jul 2018) Changed mahonri and language variables Fixes to styles 3.4 (8 Jun 2018) Redesigned styles for drop-down list - all categories Added the ability to remove the link from "all categories" Grid replaced by tile for drop-down list - all categories Possibility to remove images for categories in the "all categories" type" Fixed js bug with account item On the mobile view, you can display the categories immediately On the mobile view, it is possible to make the categories of the first level opening subcategories, rather than links At the end of the list for the type "all categories" you can add your links (without icons) 3.3 (26 Apr 2018) Changed the display of the store logo, added the ability to change 3.2 (18 Apr 2018) Copy languages for mega menu demo 3.1 (3 Apr 2018) Switch languages on the desktop version Currency switch to the desktop version The license supports Multi-Vendor 3.0 (7 Dec 2017) removed content type Icon added the ability to add and replace icons for preinstalled items focusing on menus like Amazon delay in opening drop-down lists changed language variables added to basket added profile added to the wishlist added to compare products the ability to not hide the icons of the basket, profile, comparison list and wishlist on mobile view added "table" style (Walmart)" installing the demo 2.2 (28 Nov 2017) fix menu focus 2.1 (31 Octb 2017) support the vendor support for ultimate 2.0 (11 Octb 2017) icon rewritten way to save settings (bd, php) changed the structure of templates (tpl) added a view for categories outside the full category tree 1.4 (8 Octb 2017) added RTL full width background logotype fixes 1.3 (28 Sept 2017) fixed bug for regular columns (3rd level display) added to full width for the sticks 1.2 (31 Aug 2017) additional block for vertical display of the category tree search menu item improved interaction with touch devices 1.1 (6 Jul 2017) locking the menu while scrolling color setting switching images for level 3 categories focus on menus on hover