Ninja Menus

0

Ninja Menus

extension for Magento 2

User Guide

Version 1.0

Ninja Menus

1

Table of Contents

I) Introduction ................................................................................................................ 3

II) Menu Grid ................................................................................................................. 4

III, Add new menu ......................................................................................................... 8

1. General setting ........................................................................................................... 9

2. Advanced settings ................................................................................................... 12

IV, Menu builder .......................................................................................................... 13

1. Add Item ................................................................................................................... 15

2. Edit item ................................................................................................................... 16

a, General tab ........................................................................................................... 17

b, Icon tab ................................................................................................................ 25

c, Sub Menu tab ....................................................................................................... 28

d, Design Options tab ............................................................................................... 37

3. Delete item ............................................................................................................... 42

4. Change item's position ............................................................................................ 43

5. Add new item ........................................................................................................... 46

a, Add new item ........................................................................................................ 46

b, Add new sub item................................................................................................. 47

V, Our 7 elements ........................................................................................................ 50

1. Anchor ...................................................................................................................... 51

2. Container .................................................................................................................. 54

3. Image ....................................................................................................................... 57

4. Html .......................................................................................................................... 60

5. Heading .................................................................................................................... 62

6. Clear columns .......................................................................................................... 63

7. Divider ..................................................................................................................... 66

VI, How to ................................................................................................................... 68

1. Configure menu item for Multiple Store view ........................................................... 68

2. Setup Multi Columns ................................................................................................ 71

Ninja Menus

2

3. Import Store Categories ........................................................................................... 74

4. Replace Magento default top navigation menu ....................................................... 77

VII, Contact Information ............................................................................................... 80

Ninja Menus

3

I) Introduction

This document is the User Guide for Magento 2 Ninja Menus. It describes the extension

functionality and provides some tips for a quick start.

Magento 2 Ninja Menus is an EASY-TO-USE and extremely CREATIVE extension. No

need to be professional in coding and technical skills, you can still make your own

navigation menu just by using our simple and intuitive drag & drop interface.

● Drag & Drop Magento 2 Menu Builder

● Support horizontal, vertical, accordion navigation menu

● Support 7 elements: anchor, container, HTML, image, heading, divider, clear

columns

● 100% Fully Responsive

● Support multiple stores

● Support multiple languages

● Create unlimited level

● Customize the style of the menu item: background color, font size,...

Ninja Menus

4

II) 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:

Ninja Menus

5

You can apply the following actions:

Filter: filter menus using different criteria to find your wanted ones.

Columns: 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 and tick columns such as ID,

Name, Identifier, Type, Status, etc.

Ninja Menus

6

Per page: Number of menus displayed per page.

Ninja Menus

7

Move to the following table

- The 1st column: there are some boxes for you to tick so you can select or unselect

your desired menu. The drop-down box above let you select all the menus existing.

- The 2nd and 3rd columns: The ID number and names given for each menu when you

created.

- The 4th and 5th columns: Type and Status

- The 6th and 7th column: Time created and modified

- The last one - the most important one: Let you edit and manage the existing menus.

Ninja Menus

8

III, Add new menu

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

The display will be like:

- Back button helps you come back your previous step

- Save button helps you save every change you made. Be noticeable to use this button

right and usually in order not to loose any important change.

- Click on arrow button to show what's on Advanced Settings

Ninja Menus

9

1. General setting

A drop-down list will appear after clicking on Add New Menu button:

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

Type: Choose the type you want from the drop-down list.

We'll show you how your menu look in each type here below

Ninja Menus

10

- Horizontal menu. Take a closer look here

- Vertical menu and more detailed here

Ninja Menus

11

- Accordion, or you can look closer

Ninja Menus

12

2. Advanced settings

Enable Sticky Menu: Slide the button to Yes and your menu will stick to the top on

storefront when scrolling down. Like this

CSS Classes: For advanced only (coder, programmer..)

Mobile Breakpoint(px): The size of screen (in pixel) in which your menu will

automatically switch to mobile display mode

Ninja Menus

13

IV, Menu builder

To come in Edit mode (Menu builder), choose the menu and click Edit

Overview

Please pay more attention cause this is the most important part of this guide

Generally, we've already created 3 demo menu in 3 different types: Vertical, Horizontal

and Accordion for you to get an overview. As they get the same function setting, i will

only demonstrate the function of Horizontal type.

After adding, your menu will be listed. In the table, click on Edit button, you can go

directly to the builder mode.

Ninja Menus

14

Builder tab is right below General tab, click on drop-down button so you can see

something as the image below:

- Blue Add Item button let you add new items to you menu.

- Red Delete All give you right to delete all the items existing.

- Green Import Store Categories helps easily create normal type of menu with existing

Category list

Ninja Menus

15

1. Add Item

Blue Add Item button let you add new items to you menu.

After saving, this is how it look it storefront:

Ninja Menus

16

2. Edit item

Once you created new item, you can edit easily, using this button

Click on the pencil symbol and you will see a pop up like this:

Ninja Menus

17

a, General tab

Title and Subtitle: Enter/edit/delete the name of your category.

In this case we change it to “Women” and “Clothes"

And see how it works:

Ninja Menus

18

Type: Choose the type of your category including:

- Custom Link: If you choose this type, enter your link in the below box

In this case we make it our link:

So the result when you click on Magezon1 will be:

Ninja Menus

19

- Category Link

When you choose Category Link Type, the Category will have a dropbox like this. This

case, we chose Women category for example:

Ninja Menus

20

And here is the result when clicking on the item Magezon1

Ninja Menus

21

- CMS Page Link

Do the same with the last Type: CMS Page Link and choose a Page in the drop-down

box. 404 Not Found is chosen in this case

And the result:

Ninja Menus

22

- Caret: A dropbox show off when you click on the Insert icon button let

you choose an additional symbol to appear next to the category title.

Glass Icon is chosen as Caret for Magento1 in this case

- Caret on hover: You can only see this kind of symbol when you hover

your mouse to the category on the storefront.

Heart Icon is chosen as Caret on Hover in this case

Note: If you remember the code/name of the icon, you can absolutely search icon by

typing in search box.

Ninja Menus

23

Let’s see the result in storefront:

- Target: Four ways to open linked document:

+ In a new window/tab

+ In the same window/tab

+ In the parent frame

+ In the full body of the window

Ninja Menus

24

- Hide on mobile: Switch the button to decide whether your element is shown in

frontend on mobile devices or not.

Try turning it on and check it by your mobile:

Ninja Menus

25

- Class Attribute: For coders/programars or those who have coding skill only.

=> After making all the needed changes in this tab, don’t forget to click Save button

before doing anything else.

b, Icon tab

There's a slide Show icon button -> Switch it to Yes. And you can see a list like this

Ninja Menus

26

- Add new Icon for your category by clicking on plus button to choose image from your

device or paste your Image Url in the given box.

This case an Image Url are entered.

- Manage the Icon position by choosing Left or Right in the dropdown

box.

This case we choose left.

- Add Icon on Hover just by the same way you add the new one.

This case Image Urls are entered

Ninja Menus

27

Let's see:

Ninja Menus

28

c, Sub Menu tab

- Type:

Mega Submenu and Stack menu (No position option cause the former submenu

arranged on top of the follower). When you choose the Mega Submenu Type, the

display will be like

Ninja Menus

29

Position: Select the place you want to display your sub menu and it's children in the

dropdown list.

If we choose Center, your submenu will display right under the parent and make a

straight column with its parent.

And here is its display in storefront:

What about Left edge of menu bar?

Ninja Menus

30

And how it look in Right Edge of menu bar

Let's try Left Edge of parent item

Ninja Menus

31

Or Right…

When you choose Left Edge - Vertical - Full Height, it will display like this

Ninja Menus

32

And the last one:

But if you choose Stack menu instead and keep the Width the same. The stack menu

help you show off the children of an item without hovering your mouse on it.

Ninja Menus

33

The result will be like:

Ninja Menus

34

- Width: Enter the number you want in the box

- Background Image: Insert by clicking on plus button or pasting UrL

- Background Color: Click to choose from the palette or enter color code or enter the

exact code of the color.

- Background Position: Enter position (left or right)

- Background Style: Choose your style in the dropdown list

- Inline CSS: For coder and programer only for advanced setting.

Ninja Menus

35

We’ve made an example setting for Category Digital in the backend

Ninja Menus

36

And here is the result:

Ninja Menus

37

d, Design Options tab

Design Options tab will look like this

Let go through an example to see how they work:

- Color setting

Set your color in 3 conditions: Select appropriate color for each section: Font,

Background, Border by choosing from palette or enter exact color code

Normal

Ninja Menus

38

When you Hover

And when Active

Ninja Menus

39

- Border and Padding

Ninja Menus

40

- Edit your menu text by adjusting Alignment, Border Style, Font size (in pixel), Inline

CSS

Ninja Menus

41

Let's give an example on Electronics category:

Ninja Menus

42

3. Delete item

Navigate you pointing mouse to the category you want to delete and click the red

recycle bin symbol.

As you see, it's gone

Ninja Menus

43

4. Change item's position

You can change the position by 2 ways:

- Drag and drop: the easiest and quickest way. Which this action, you can move an

item to anywhere you want

Ex: We are changing Electronics category to the place of Custom in figure 4.1

Fig 4.1

How it look the storefront (4.2)

Fig 4.2

Ninja Menus

44

Or even the item in menu (4.3)

Fig 4.3

And how it look (4.4)

Fig 4.4

Ninja Menus

45

- Using arrow symbol:

Switch your item's position to the left or right (4.5)

Fig 4.5

And the result in frontend (4.6 & 4.7)

Fig 4.6

Fig 4.7

Ninja Menus

46

5. Add new item

a, Add new item

To add a new Item in your menu, click on Add item button (as described above:

A new item appears with default name (Item 1,2,3..) like this:

Then, click on the item to see symbols, click on the pencil symbol to see a pop-up

where you can edit your new item. How to use the option inside the pop-up is described

in detail in section 2 - Edit item.

Ninja Menus

47

b, Add new sub item

To add new sub item, Choose a parent first (This case it is About us), then click on plus

symbol\Anchor

A new sub item appears with its default name

Click on the area to see all options, then click on pencil symbol to Edit your new sub

item. Edit the sub item in just the same way of new one.

This case we do some setting as shown in following figures

Ninja Menus

48

General tab

Ninja Menus

49

Icon Tab

And here is the result:

Ninja Menus

50

V, Our 7 elements

Last but not least, we'll show you how to use plus symbol. After clicking you can see

this

Ninja Menus

51

1. Anchor

Anchor element let you make a new sub menu (children of the category you just click

on). As shown above, the default title of the new categories are Item 1,2,3… but you can

absolutely change and adjusting by clicking on pencil symbol.

Unsurprisingly, this feature let you create multi-level sub menu. Let's go through step by

step

- Sub menu History: Click on plus button\Anchor

- General tab:

Ninja Menus

52

- Icon tab:

- Submenu tab:

We’ve made 3 levels for About us. They are: History, Our team and Our vision using

this element and edit by pencil symbol (as described above)

Ninja Menus

53

How it look in the backend

Let see how amazing it will be in storefront

Ninja Menus

54

2. Container

Unlike Achor, when you add a Container, it means you add a no-title box to your menu.

Just a blank space, no title editing. You can only edit style (width, background color,

style, position…) in Submenu tab and Class Attribute (For those who have coding

knowledge) in General tab

Remember: Adding container means you add another background for your menu. To

see how it display, add more items inside it.

Ninja Menus

55

Here is an example using this type of element

In the edit mode, tab Submenu, we choose:

Then, add Item 1,2 to the container

Ninja Menus

56

→ And the result:

Ninja Menus

57

3. Image

Click on the Image element to create a new space → Click on that space and choose pencil

symbol → a pop up appear

- Click on Upload File to choose existing images from your device or enter/paste Url for

this

- Alternative Text: Enter the text you want to display when your site can't load the

image

- Enter the Title Tag

- Adjust the size you want by enter the Width and Height box (pixel)

Ninja Menus

58

Let’s try with this setting:

=> Don’t forget to save when you finish

Ninja Menus

59

And the result…

Ninja Menus

60

4. Html

Click on Html element, you can see

Edit your content here with WYSIWYG Editor (You see what you get) button. Try

“Money ain't everything"

Ninja Menus

61

You can see it in frontend

Ninja Menus

62

5. Heading

Make your parent categories easier on the eyes by Heading element with full Design

options for you to edit.

Click on the pencil symbol of heading, you can see this

- Adjust Title, choose Type on General tab

- Design your Heading on Design Options tab (Full options). We make this setting as an

example

Ninja Menus

63

6. Clear columns

This element help separate items in the same row but still keep their own width

To add a new clear column, click there

Ninja Menus

64

Click on the edit symbol the new column, there will be a pop-up like this

Decide whether you want your column to display in the frontend or not by switching

Hide on Mobile slide button.

Class Attribute: For coder only

You can change the position of the new column by clicking on the arrow button, move it

up or down. This case we create a clear column to separate item Socks and ties with

the image

Ninja Menus

65

And here is the result

Ninja Menus

66

7. Divider

When adding divider, you can add a title with a cross line that separate other items

Like this

and edit it

Ninja Menus

67

And the result will be like

Ninja Menus

68

VI, How to

1. Configure menu item for Multiple Store view

To configure the menu items, click on the caret of All stores view, and choose 1 store

view you want to edit.

We choose English store first.

Ninja Menus

69

In English view, it will no longer have 3 buttons: Add Item, Delete All & Import Store

Categories

It means you just can edit the text of your items

Now it's time to do it

Ninja Menus

70

In the storefront, choose English for your view mode by clicking on this

Then see your result

Do the same with other languages.

France, for example

Ninja Menus

71

2. Setup Multi Columns

For example, you want to setup multi columns for this category.

We will show you how to group this 10 items into 5 columns

Firstly, you should understand the rule of our items is auto-filling. You got a container

with 100% in width and so are the items. If you want them to be set in 5 columns, just

create 5 container, and turn the item's proportion to 1/5 of 100% (20%).

Create 5 container

Ninja Menus

72

Create 2 items for each

Then change the width to 20%

Ninja Menus

73

What you see in backend:

And the result in storefront:

Ninja Menus

74

3. Import Store Categories

As clicking on that green button, a pop-up appears:

Ninja Menus

75

- Category box displays list of categories for you to choose. Some categories have

children like this

As soon as you select one category and click Import -> It will be automatically added to

your menu, including all its children

Like this

Ninja Menus

76

Result in storefront

- Import Childrens is a slide button. When you turn it to Yes, all the children of the

category chosen (if it has children) will be added as separate categories in the right side

of the parent.

On the storefront

Ninja Menus

77

4. Replace Magento default top navigation menu

First, you have to create your own new menu with your store's categories. We make this as

an example:

In the General Setting part, make sure you turned the Enable Menu to Yes and named

your menu first. This case we make it “Top-menu”.

Then, in the Identifier field, enter exactly the word “top-menu" and let our code do the

rest.

Ninja Menus

78

Now, see the result if you do it in a right way

Ninja Menus

79

Note: If you enter wrong code in the Identifier field, your menu will not be displayed in the

storefront.

Like this:

And the result will be like:

Ninja Menus

80

VII, Contact Information

If you have any questions or need any support, feel free to contact us via following

ways. We will get back to you within 24 hours since you submit your support request.

- Fill out Contact Us form and submit to us.

- Email us at support@magezon.com.

- Submit a ticket.

- Contact us through Skype: support@magezon.com.

- Contact us on live chat: support@magezon.com.