Ninja Menus extension for Magento 2 User Guide Version 1.0 0
Table of Contents Ninja Menus I) Introduction... 2 II) Menu Grid... 3 III, Add new menu... 7 1. General setting... 8 2. Advanced settings... 11 IV, Menu builder... 12 1. Add Item... 14 2. Edit item... 15 a, General tab... 16 b, Icon tab... 24 c, Sub Menu tab... 27 d, Design Options tab... 36 3. Delete item... 41 4. Change item's position... 42 5. Add new item... 45 a, Add new item... 45 b, Add new sub item... 46 V, Our 7 elements... 49 1. Anchor... 50 2. Container... 53 3. Image... 56 4. Html... 59 5. Heading... 61 6. Clear columns... 62 7. Divider... 65 VI, How to... 67 1. Configure menu item for Multiple Store view... 67 2. Setup Multi Columns... 70 3. Import Store Categories... 73 4. Replace Magento default top navigation menu... 76 VII, Contact Information... 79 1
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,... 2
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: 3
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. 4
Actions: Include the following actions applied to the selected menus in the list: - Delete: remove the chosen menus from the list. - Enable: enable the chosen menus. - Disable: disable the chosen menus. Per page: Number of menus displayed per page. 5
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. 6
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 7
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 8
- Horizontal menu. Take a closer look here - Vertical menu and more detailed here 9
- Accordion, or you can look closer 10
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 11
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. 12
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 13
1. Add Item Blue Add Item button let you add new items to you menu. After saving, this is how it look it storefront: 14
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: 15
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: Type: Choose the type of your category including: - Custom Link: If you choose this type, enter your link in the below box 16
In this case we make it our link: So the result when you click on Magezon1 will be: 17
- Category Link When you choose Category Link Type, the Category will have a dropbox like this. This case, we chose Women category for example: 18
And here is the result when clicking on the item Magezon1 19
- 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: 20
- 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. 21
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 22
- 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: 23
- 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 24
- 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 25
Let's see: 26
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 27
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? 28
And how it look in Right Edge of menu bar Let's try Left Edge of parent item 29
Or Right When you choose Left Edge - Vertical - Full Height, it will display like this 30
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. 31
The result will be like: 32
- 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. 33
We ve made an example setting for Category Digital in the backend 34
And here is the result: 35
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 36
When you Hover And when Active 37
- Border and Padding 38
- Edit your menu text by adjusting Alignment, Border Style, Font size (in pixel), Inline CSS 39
Let's give an example on Electronics category: 40
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 41
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 42
Or even the item in menu (4.3) Fig 4.3 And how it look (4.4) Fig 4.4 43
- 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 44
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. 45
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 46
General tab 47
Icon Tab And here is the result: 48
V, Our 7 elements Last but not least, we'll show you how to use plus symbol. After clicking you can see this 49
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: 50
- 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) 51
How it look in the backend Let see how amazing it will be in storefront 52
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. Here is an example using this type of element 53
In the edit mode, tab Submenu, we choose: Then, add Item 1,2 to the container 54
And the result: 55
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) 56
Let s try with this setting: => Don t forget to save when you finish 57
And the result 58
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" 59
You can see it in frontend 60
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 61
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 62
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 63
And here is the result 64
7. Divider When adding divider, you can add a title with a cross line that separate other items Like this and edit it 65
And the result will be like 66
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. 67
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 68
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 69
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 70
Create 2 items for each Then change the width to 20% 71
What you see in backend: And the result in storefront: 72
3. Import Store Categories As clicking on that green button, a pop-up appears: 73
- 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 74
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 75
4. Replace Magento default top navigation menu Ninja Menus 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. 76
Now, see the result if you do it in a right way 77
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: 78
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. 79