Ninja Menus

Ninja Menus
extension for Magento 2
User Guide
Version 2.0

0
 Ninja Menus

Table of Contents
I) Introduction​…………………………………………………………………………………….2

II) General Configuration​……………………………………………………………………….3

III) Menu Grid​……………………………………………………………………………………..4

IV) Add New Menu​…………………………………………………………………………….... 9

1. General Settings​………………………………………………………………………….. 10

2. Styling​……………………………………………………………………………………... 14

3. Advanced settings​………………………………………………………………………...16

V) Menu Builder​………………………………………………………………………………...19

VI) Element List​………………………………………………………………………………... 22

VII) Menu Item​…………………………………………………………………………………..23

1. General Tab​………………………………………………………………………………..23

2. Style Tab​…………………………………………………………………………………...31

3. Icon Tab​…………………………………………………………………………………...​33

4. Submenu Tab​…………………………………………………………………………….. 34

VIII) Single Image​…………………………………………………………………………….... 36

IX) Support​………………………………………………………………………………………42

1
 Ninja Menus

I) Introduction
This document is the User Guide for Ninja Menus. It describes the extension functionality
and provides some tips for a quick start.

Ninja Menus​ is an EASY-TO-USE and extremely CREATIVE extension. Without coding and
technical skills, create your own navigation menu just by using our simple and intuitive drag
& drop interface.

Ninja Menus' builder is developed on a core builder based on which we’ve built all builder

extensions. The core builder includes elements and settings that all builder extensions

have in common. For details, please visit:

https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf

In this guide, we’ll focus on elements and settings that are specific to Ninja Menus.

Note:​ After installing the extension, i​f you want to ​Disable​ the module and view the default
menu, please select ​No​ from the ​Enable Ninja Menus​ field. Don’t forget to ​refresh cache
layout​.

2
 Ninja Menus

II) General Configuration

After installing the extension, navigate to ​Stores > Settings > Configurations​ or ​Menus>
Settings ​from default ​Menu Grid ​backend:

The configuration interface will look like below:

● View​ Current Version​ of the extension.

Enable Ninja Menus​: Select ​Yes/No​ to enable/disable the extension.

3
 Ninja Menus

III) Menu Grid

Once the extension has been installed, the section ​Menus​ will appear in the ​Content
menu​. To go to admin grid of ​Ninja menus extension​, navigate to ​Content > Menus​ or
Menus > Manage Menus​ and you will see something like this:

4
 Ninja Menus

From left to right, you get the following functions:

(1) ​Actions:​ The dropdown box that lets you ​Delete/Enable or Disable ​ the selected
Menus.

5
 Ninja Menus

(2) ​Filters​: Lets you filter the menus by the following criteria:

(3) ​Per Page​: Set the number of menus to be displayed per page.

(4)​ Default View​: Set the view status (Default View only). Or you can save the current view
as a new store view using ​Save View As…

6
 Ninja Menus

(5) ​Columns​: Select columns to be displayed in the grid. Click here and a drop-down list
will appear. Tick the columns you want to appear in the table. In the below image, you can
see columns selected are:

(6) ​Navigation Buttons​: Move to the next/ previous page

(7) ​Select​: Make selection/ deselection
- If there’s no menu selected
There are only 2 options while clicking on the caret like the below image

7
 Ninja Menus

- If there’s menu(s) selected

There are 4 options while clicking on the caret that is presented in the following image:

(8) ​Tick box​: Tick on the desired menus to select

(9) ​Select​: Decide to ​Edit​ or ​Delete​ the current menu by clicking on the caret.

8
 Ninja Menus

IV) Add New Menu

Navigate to ​Menus > Add New Menu​ or directly click on orange ​Add New Menu ​button

The interface will be like:

9
 Ninja Menus

1. General Settings
In the General setting section, there will present following fields:

● Enabled​: Slide the button to ​Yes​ to enable Menu on your website and it will be
displayed in your storefront.
● Menu Name​ (required): Enter the menu name to manage your menu list easily.
● Identifier​ (required): Enter a set of numbers, letters, or symbols that is used to
represent a piece of data or a process in a computer program. Commonly, we set
the identifier the same as the menu name (separate words by hyphens). If you want
to stick your menu to the top as it’s the main navigation, set Identifier to
“​top-menu​”.
● Type​:​ ​Choose the type you want from the drop-down list.

Try these settings for General section

10
 Ninja Menus

And frontend will be like:

Plus, we show you how your menu look in each type here below

11
 Ninja Menus

- Horizontal menu

- Vertical menu

12
 Ninja Menus

- Accordion

13
 Ninja Menus

2. Styling

● Main Font Size​: Enter a certain number that defines the font size of text in the
menu.
● Main Font Weight: ​Enter a certain number that defines the font size of text in the
menu.
● Main Color: ​Select a color from color swatch to set up text color of parent items
● Main Background Color: ​Set up main background color of parent items
● Main Hover Color: ​Select a color from color swatch to set up parent text color
when hovering.
● Main Hover Background Color: ​Select a color from color swatch to set up main
background color when hovering.
● Secondary Color: ​Set up text color of children menu items.
● Secondary Background Color: ​Set up background color of children items.
● Secondary Hover Color: ​Set up text color when hovering on children menu items.
● Secondary Hover Background Color: ​Set up background color when hovering on
children menu items.

14
 Ninja Menus

To clarify the point under consideration, try the following settings:

And here is the result on the storefront:

15
 Ninja Menus

3. Advanced settings
Collapse the Advanced settings tab to see following configurations:

● Mobile Breakpoint(px): The size of screen (in pixel) in which your menu will
automatically switch to mobile display mode .

16
 Ninja Menus

● Enable Sticky Menu:​ ​Slide the button to ​Yes​ and your menu will stick to the top on
the storefront when scrolling down. Like this.

● Overlay: ​Set up a dark background when you hover over the menu item of the top
navigation. Like this
● Overlay Opacity: ​Enter a value to define the opacity level when hovering.
Let’s see how the Overlay setting work:

● Hamburger on mobile: ​Display a hamburger menu icon on mobile screen to save

space for other page components.

17
 Ninja Menus

● Hamburger Title:​ Enter the Menu name

Try setting these 2 above fields like follow and see the result on mobile:

● Hover Delay Timeout: ​Define how long will the submenus appear after hovering on
the main menu.
● CSS Classes:​ ​ For advanced only (coder, programmer..)
● Custom CSS: ​For those who want to customize their menus for specific purposes.
Insert the code inside the field to extend the menu.

18
 Ninja Menus

V) Menu Builder
Once the extension has been installed, the section Menus will appear in the Content menu.
To go to admin grid of Ninja menus extension, navigate to ​Content > Menus

19
 Ninja Menus

List of existing menus will be displayed here:

To go on the menu builder interface, choose the menu you want to edit then click
Select > Edit.
This case, we choose ​Top Menu​, and here's its backend interface:

20
 Ninja Menus

From left to right, we have some buttons with their function like below:
● Button​ with Magezon Logo drives you to the official Ninja Menus page.
● Plus​ button lets add a new item into the menu.
● Import​ button helps easily create a normal type of menu with the existing Category
list.
● Template​ button shows the list of 8 common pre-defined menus for you to choose.
● Coding​ button lets you copy or page lines of code to save time configuring.
● Setting​ buttons is useful for developers to customize the menu.
● Undo​ and ​redo​ whenever you make a mistake.
● Responsive​ button (with 5 common devices listed) lets you choose the screen
mode to configure individually.
● Widen​ button lets you see the builder in full screen and configure the menu in a
bigger viewport.

21
 Ninja Menus

VI) Element List

Hover the mouse to a random menu item to see a drop-down like this.
Click on ​Add Element

The list of 11 elements supported will be shown like follow:

Row, Text Block, Section, Heading, Separator, Empty Space, Tabs, Generate
Block, Magento Widget​ are the core elements that are described carefully in this ​guide​.
Now, come to our specific elements.

22
 Ninja Menus

VII) Menu Item

1. General Tab
Common settings may include:
CSS Animation: ​Choose the appearing animation for element. Then animate
the tab beside will show you how the chosen animation effect looks like.
Disable Element:​ If yes, the element will be invisible on frontend.
Enable Cache:​ Turn on the button to apply cache to the element.
Cache Lifetime (Seconds):​ After how many seconds to refresh cache.
Element ID / Element Class Attribute / Element Inner Class Attribute:​ This is
for developers to add additional functions.

23
 Ninja Menus

Let's start by adding some menu items for ​Category Accessories

In the General tab, fill in the ​Title​ and ​Subtitle​.

Choose the link type out of 4 types in the list: Custom link, CMS page link, Product link and
Category link.
This case, we choose Custom link ​Type​ and paste the URL in the ​Custom Link​ field
Enter the ​Label​ key and decide its ​Position

24
 Ninja Menus

See the result:

Add new item and try Category Link ​Type​:

25
 Ninja Menus

The result will be like:

26
 Ninja Menus

Select the ​Caret​ icon when normal and​ Caret on hover

The result on the storefront:

27
 Ninja Menus

Switch the on-off buttons to set the caret to be ​Hide below/ above breakpoint​ (On
mobile/ desktop)
Decide whether to ​Add nofollow option to link​ or not
Set the link ​Open New Tab
Decide where to​ Scroll to​ when the item is clicked. (Name the ID of the desired block then
insert the exact name to drive customers to the right place)
Choose the desired ​Alignment​.

This case, we turn on all the buttons and set the configuration like below:

28
 Ninja Menus

And here's how it looks in the front:

- Above the breakpoint (On desktop)

29
 Ninja Menus

- Below breakpoint (On mobile mode)

30
 Ninja Menus

2. Style Tab
Configure the​ Item Padding​, ​Item Font Size​ and ​Item Font Weight

Set the Item ​Colors​ when ​Normal

31
 Ninja Menus

And ​Hover

Then see the result:

32
 Ninja Menus

3. Icon Tab
Switch the ​Show Icon​ button to turn this function on
Select the ​Icon​ when normal and​ Icon on Hover​ from​ Icon Library

See how they look in the front:

33
 Ninja Menus

4. Submenu Tab
Set the ​Submenu Tab​ for our ​Accessories​ Category
Choose your desired ​Type​ and set the ​Width, Animation In, Out and Duration(s). ​This
case we choose ​Stack Submenu Type.

Let's see the result:

34
 Ninja Menus

Try ​Mega Submenu Type

And ​Right Edge of Menu Bar ​for this case

And here's how the submenu looks:

35
 Ninja Menus

VIII) Single Image

Case no.1​: Add a single image for Accessories by uploading from the ​Media Library
- Fill in the ​Title​ and ​Alternative Text
- Choose the​ ​position to ​Show Title. ​We set it ​Below Image​ this case.
- Set the ​Image Width and Height ​like this

36
 Ninja Menus

Then see the result

37
 Ninja Menus

Set your ​Image Style, On click action

Switch the button to ​Enable Popup Effect
Paste ​Video or Map ​link
Set the ​Border Settings: Radius, Width, Style and Color ​like below:

38
 Ninja Menus

And the result in the storefront

39
 Ninja Menus

Case no.2​: Select the single image from the​ External links​:
Set the configuration like this with the External image link inserted
Enter the ​Title​ and ​Show Title On Hover
Select ​Zoom​ in ​Hover Effect​ field
Set the ​Hover Text Color​ and ​Hover Background Color

40
 Ninja Menus

Then the result will be like

- When Normal

- When Hover

41
 Ninja Menus

IX) Support
If you have any questions or need any support, feel free to contact us via the following
ways. We will get back to you within 24 hours since you submit your support request.

● Submit ​contact form​.

● Email us at ​support@magezon.com​.
● Submit a​ ​ticket​.
● Contact us through ​Skype​: support@magezon.com.
● Contact us via live chat on our ​website​.

42