Megamenu Codazon App #

In this article :

I. Installation

Go to https://shopify.codazon.com/megamenu/web . Enter your domain and purchased key from themeforest ( if you don’t have purchased key, please read https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code to get clearing.

After enter purchased key, the system will process authentication and you must login your admin to complete. After authentication, the system will ask you permission for megamenu app.

Don’t worry about warning “This app isn’t listed on the App Store” because we don’t public this app on Shopify App Store. Click “Install unlisted app”.

After installation completed, you can edit menu by clicking Apps, then click Cdz Megamenu.

II. Settings

By default, the system will display data of main menu with language is “English”. Click menu on the top to edit other menu. A menu can display with multi language, to edit menu in other language, click language that you want to edit.

By default, the system will display data of current published theme, you can change to other theme to edit menu for unpublish theme.

On the left are the languages that have been used, and on the right are the languages that you have not been used yet. Click “More language” button to add new language is not displaying on the right. On the other hand, you can copy data of a language to language you is editing.

And Below is the basic settings for your menu with current language.

Type There are two options: ·         Horizontal menu ·         Vertical menu.
Wrapper CSS Class The CSS class of menu HTML wrap element.
Dropdown Style There are two options: ·         Auto width: You can defined the width of every dropdown. ·         Full width: All dropdown widths of have a same value and equal to the width of container (default is HTML body width).
Dropdown Animation The animation of dropdown menu after hovering the mouse on menu. There are four options: ·         Normal ·         Fade ·         Slide

III. Menu Builder

a. Menu Level

 

b. DRAG AND DROP ITEMS TO MENU
  • Drag and drop level 1 items
    Item Link Add a single hyperlink to menu
    Shopify Navigation Add a Shopify navigation to menu



  • Drag and drop level 2 items: Level 2 is the dropdown menu of a level 1 item. For this item level, there are 5 types that you can use:
    Item Link The dropdown is a group of single links.
    HTML Content The dropdown is a custom html content. If use this type, you can add your favourite html, select layout
    Tabs The dropdown is a tabs layout.
    Bootstrap 12-Columns If you have knowledge about Boostrap CSS, you can use this type to build your favourite dropdown content. Our module supports Boostrap 12-Columns. This type will help you build a complex layout for dropdown menu. If the dropdown layout is not very complex, you should use HTML Content instead.

    Moreover, you can also use a combination of types above to set up a level 2 dropdown. For example:

IV. HTML content for menu

a. Drag and drop html content to menu

b. Settings
Custom CSS Class The custom CSS class for dropdown HTML element in DOM.
Custom CSS Inline Style The custom CSS inline style for dropdown HTML element in DOM. For example: padding-bottom: 50px.
Dropdown Width The width of dropdown content (calculated by pixel).
Dropdown Content The layout and HTML content of dropdown.
Background for content The background image of dropdown content.
c. Layout and content

d. Background Image

e. Edit tool

You can edit the HTML content with our edit tool 

V. Tabs for menu

a. Drag and drop tabs to menu

To set up a tabs, you have to use a tabs container and some of tab items.

B.

b. Tab Container
Custom CSS Class The custom CSS class for tab container HTML element in DOM.
Custom CSS Inline Style The custom CSS inline style for tab container HTML element in DOM. For example: padding-bottom: 50px.
Tab Width The width of tab container.
Tab type Horizontal or Vertical (view image below).
Background for content The background image of tab container. See more in 2.2.3 d Background image.

C.

c. Tab Items
Tab Title The title of tab item link.
Tab URL Redirect link when clicking on tab item link.
Custom CSS Class The custom CSS class for tab item panel in DOM.
Tab Content The layout and HTML content of tab item panel. This setting is similar to setting of Dropdown Content. See more in 2.2.3 HTML Content for menu
Background for content The background image of tab item panel. See more in 2.2.3 d Background image.

VI. Bootstrap Layout

To config this type, you should have knowlegde about Bootstrap CSS. This type will help you build a complex layout for dropdown menu. If the dropdown layout  is not very complex, you should use HTML Content instead (See more in 2.2.3 HTML Content for menu). We support Bootstrap 12-columns. Using this layout type, the HTML structure of the dropdown will be like the example below: <ul class=”groupmenu-drop”> <li class=”item row“> <div class=”col col-sm-2“>Your content 1</div> <div class=”col col-sm-4“>Your content 2</div> <div class=”col col-sm-6“>Your content 1</div> </li> </ul>

a. Drag and drop boostrap layout to menu

The image below will guide you how to build a boostrap layout for dropdown:

b. Bootstrap row

Setting Fields:

Custom CSS Class The custom CSS class for row HTML element in DOM.
Custom CSS Inline Style The custom CSS inline style for row HTML element in DOM.
Background for content The background image for row element. See more in 2.2.3 d Background image..
c. Bootstrap Column

Setting Fields:

Custom CSS Class The custom CSS class for column HTML element in DOM. You can add boostrap class like col-sm-12, col-md-6, col-xs-11,… to this field.
Custom CSS Inline Style The custom CSS inline style for column HTML element in DOM.
Help Guide Powered by Documentor
Suggest Edit