Noo Menu

NOO Menu Design and Layout (advanced)

Menu HTML Structure & Classes

NOO Menu is structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names to affect styling, and the menu itself has unique ID’s that you can use to target specific elements within your menu. This section will show to you the basic structure as well as the class name so that you can add the style with our Custom Style option or within editing your theme’s style.

Here is the html mock-up of our NOO Menu, the explanation come further below.

<div class="noonav">
    <div class="noo-megamenu">
        <ul class="noo-nav level0">
            <li class="noo-nav-item dropdown mega">
                <a class="dropdown-toggle"href="#">Menu 1<bclass="caret"></b></a>
                <div class="noo-nav-child dropdown-menu mega-dropdown-menu">
                    <div class="mega-dropdown-inner">
                        <div class="row-fluid">
                            <div class="noo-col noo-col-nav">
                                <divclass="mega-inner">
                                    <ul class="mega-nav level1">
                                        <li class="noo-nav-item">
                                            <a href="#">Sub Menu 1</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="noo-col noo-col-widget">
                                <div class="mega-inner">
                                    Widget
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Outer Container

Our menu have 2 containers, the outer is a <div> with class ‘noonav’:
 <div class="noonav">

Inner Container

Inner container is a <div> with class ‘noo-megamenu’

Top Level item <li>

The top level items is the direct <li> child of the level0 ul. It can have several class:

General class ‘noo-nav-item’ like all other menu item.
With the item that have submenu, there’s additional class ‘dropdown’
With the item that the children is widget or has column created by NOO Menu, there’s additional class ‘mega’

<li class="noo-nav-item dropdown mega">

Menu item <a>

The <a> is the link of the menu item. Normal <a> has no class but with the item that has child items, there’s additional class ‘dropdown-toggle’ and additional caret item.

Normal <a>: <a href=”#”>Menu 1</a>
<a> with sub items: <a class=”dropdown-toggle” href=”#”>Menu 1<bclass=”caret”></b></a>

Sub Menu container

Sub Menu has 2 levels containers, those are 2 <div> with class as below:

<div class="noo-nav-child dropdown-menu mega-dropdown-menu">
    <div class="mega-dropdown-inner">
        <div class="row-fluid">

The first two containers are the main container while the last container ‘row-fluid’ is the container for creating the multi columns submenu.

Sub Menu Column

<div class="noo-col noo-col-nav">

All columns are <div> with class ‘noo-col’, based on the type of the column, there’s additional class attached.

Column with normal menu items: class ‘noo-col-nav’
```
 <divclass="noo-col noo-col-nav">
```
Column with widget: class ‘noo-col-widget’
```
 <divclass="noo-col noo-col-widget">
```

Sub Menu Content

Sub menu content hs the <ul>, <li> structure like the Top Menu content:

    <ul class="mega-nav level1">
        <liclass="noo-nav-item dropdown-submenu">
            <ahref="#">Sub Menu 1</a>
            ...
        </li>
    </ul>

There are some differences:

The <ul> have the class with number indicated the level of menu: ‘level1’, ‘level2’…

If the item has sub item, the <li> have class ‘dropdown-submenu’ instead of ‘dropdown’ like the top level.

NOO Menu - Installation

Installing NOO Menu

NOO Menu installs and activates just like any other WordPress plugin.

Download the plugin zip file to your desktop

After you purchased our menu, please following the instruction from CodeCanyon to download the package. You’ll then find our plugin zip file inside the package.

Upload the plugin to WordPress

Upload the plugin folder to your WordPress install. There are two ways of doing it:

Upload it manually in the wp-content/plugins folder using an FTP client like FileZilla (http://filezilla-project.org/)
Upload it through the WordPress user interface by clicking the Plugins > Add New menu. Click the “Upload” tab, select the zip file and hit “Install Now”.

Activate NOO Menu

Activate the plugin when prompted or go to Plugins > Installed Plugins and click the “Activate” link next to the plugin name.

Done!

You are now ready to use NOO Menu!

If you need more information about installing plugins, get the more in-depth information on the WordPress codex.

NOO Menu - Troubleshooting

WordPress Requirement

Your WordPress site must have some standard requirements for our NOO Menu to function normally. Please check these requirements before anything else when you encounter a problem.

WordPress requirement: version 3.5 or above.
Menu requirement: Menu setup through Appearance Menus Screen
Theme requirement: theme with proper implement of WordPress 3 Menus
the theme you used for your WordPress site must properly implement WordPress 3 Navigation Menus. Technically, it means that the theme using the WordPress standard function wp_nav_menu to display your menu.

Most of theme developed today has been proper implement of WordPress 3 Menus so if you have problem and can’t check the theme requirement, don’t worry about it and move to check the Theme/Plugin conflict.

Theme/Plugin conflict

With NOO Menu, we have tried our best to make it as compatible as possible with all themes and plugins; however, some as there’re too many themes and plugins, the conflict is impossible to avoid.

The following sections provide instructions for determining if an issue you are experiencing with NOO Menu is caused by a theme or plugin conflict. If you determine that your issue is not a theme or plugin conflict by following these instructions, please report your issue on our Support site.

Checking for Theme Conflicts

To test for a theme conflict:

Activate default Twenty Twelve, Thirteen or Fourteen theme. I recommend using Twenty Twelve or Thirteen because they have the horizontal menu.
Check to see if the issue still occurs

If the issue does not occur after having activated the default “Twenty Twelve” theme, your theme is causing a conflict with NOO Menu.

If the issue continues to occur, you should then test for plugin conflicts.

Checking for Plugin Conflicts

To test for a plugin conflict:

Locate other menu plugins for WordPress: there’re very great menu plugins like UberMenu or Main Mega Menu but because they’re doing the same job as us, those plugins may have conflict with NOO Menu. You can find menu plugins by searching ‘menu’ or ‘navigation’ on their name.
Disable those menu plugins
Activate NOO Menu
Check to see if the issue occurs

If the issue does not occur, one (or more) of these menu plugins is causing a conflict. You mustn’t use that plugins in concurrence with NOO Menu. To determine which plugin(s) is causing the conflict, follow these steps:

Activate each plugin one by one

Check to see if the issue occurs after each plugin is activated.

FAQs

If you can’t find the solution here, maybe your problem was already been asked. Please check the FAQs article.

NOO Menu - Functionality

This section contains the options for changing the function of NOO Menu. Below are the details for each option:

Orientation

Orientation: NOO Menu support Horizontal and Vertical menu and with this option you can change the orientation of your menu.
Submenu Direction: The direction of the submenu menu. Base on the Orientation, there’s 2 group of direction: submenu is Up and Down when the menu is horizontal; submenu from Left to Right or Right to Left when the menu is vertical.

Animation

This option is for changing the animation effect of the Sub Menu.

Animation: In NOO menu we supported 4 animation effects: Slide, Fade, Zoom and Elastic. If you choose None, the animation will be turn off.
Animation Duration: the amount of time that the submenu takes for displaying.
Animation Delay: the amount of time from when you start hover on the item to the time when the sub menu is start displayed. This option usually used for avoid the submenu to display every time visitors just fly the mouse over the menu.

Mobile Action

Here you can choose how the Menu will act when view on small device like mobile. You can choose from 3 actions:

Collapse with Toggle Button: with this option, NOO Menu will collapse on mobile and showing one Toggle Button (the Mobile Menu button) responsive for displaying the menu.
Collapse no Toggle Button: this option is similar to the previous option, except that there’s no Toggle Button is displayed. This option should be used when your theme already has the Toggle Button. Also, because most of the responsive themes now have the Toggle Button, this option is selected by default.
Do nothing: the menu will not collapse on mobile, in other work, the responsive feature is disabled.

Sticky Settings

The sticky option makes your menu ‘stick’ to the top of the screen when user scroll pass the menu. This option is very common in today menu.

Use Sticky Menu: enable sticky menu on your site or not.
Sticky Margin Top (px): in case you want some space between sticky menu and the top border, just input your number here. The default value is 0.

NOO Menu - Structure and Style Preview

On NOO Menu, there’re two menu views for structure and styling. The reason for two views is that you’ll need a plain view with structure annotation for changing the structure of the menu, and you also will need to see how the menu actually look in real time when changing the style.

Structure: plain menu with annotation for structure editing. You can change to structure view by the STRUCTURE/PREVIEW switching button or by clicking on any menu item.
Preview: the live preview for real time preview of the menu. You can change to Preview by the STRUCTURE/PREVIEW switching button, the Preset Style button or by clicking on any style setting tab: Menu Bar, Top Menu, Top Menu Hover, Sub Menu, Sub Menu Hover and Custom Style.

Switch between Structure and style Preview

There is one button for switching between STRUCTURE and PREVIEW, it’s locate on the top right of the setting page.

More Information

For more information, please see the detailed post for structure and preview:

Menu Structure – Overview
Menu Styling – Live preview with completely control of your Menu’s style

NOO Menu - backend overview

Single button to access NOO Menu

After installation, check out the Appearance Menus Screen you will see one single button to access our NOO Menu. Click it to access the NOO Menu setting.

All options in one place

One of the thing we try to achieve with NOO Menu is group all the options available in one place so that you don’t have to repeatedly open and add option for each menu item. Here you can see that we manager to add all the options to one place

Preset Styles

Preset Style is the first thing you should check when you start using our NOO Menu. Below is the list of all the preset style included in this version.

Algae color – Rounded
Crystalline Black – Rounded
Steel Blue – Flat
Magnetic Violet – Flat
Growing Gold – Flat
Clean Red – Flat
Clean Black Coral – Flat
Gleam Blue Dark – Flat
Gleam Red White – Flat

NOO Menu - Mega Menu options

Enable Submenu

This option has to working situation:

If the menu item does have submenu, it’ll show/hide the submenu.
If the menu item doesn’t have submenu, it allows you to add new submenu and add widget(s) to the submenu.

To access this option, click on menu that you want and select this option.

Add new column/row

You can add new column or row for a selected column/row

Group submenu or not

You can group submenus of any menu item by selecting the menu item then enable option “Group”.

Assign widget for new created column/row

Select each newly created column/row (aka. blank sub item), you’ll see the option to select or add widget. For selecting, only select from dropdown list. If you want to add new widget, select Add widget: A popup will display for you to select widget. Then just follow the option to create new widget for your menu item.

Move menu item

This option allow you to divide submenu into columns, just select the Position option to move menu item between columns.

Set proper width for submenu and column

You can set a fixed width for each and every submenu:

For the column, our menu based on 12 columns grid so you can set each column a width of 1 ~ 12:

Add icon for menu item

Each menu item can has its own icon. We only support Awesome Font icons and you can input the icon class or click the select link to choose icon from popup.

NOO Menu - Overview Menu Structure

In this section, we’ll show you how to use NOO menu to create new menu structure. The structure here is what you can’t do with normal WordPress menu: you can divide your submenu into columns and rows as well as adding widget to your menu.

Understand the setting levels of NOO menu structure

Before you start, you should know about the 3 levels of configuration, they are the option sets that will show to you when you choose the corresponding levels on your menu. We have 3 levels:

Submenu setting
Column setting
Menu Item setting

First we’ll give you the quick look at which options available for each level, then there’re real user cases of how to using NOO Menu to create a Mega Menu.

Submenu setting

The Submenu setting will be display when you select the submenu on the toolbox. In the picture bellow, you can see that the submenu has light yellow background and you can trigger the submenu setting when select the most outer boundary of the submenu.

In this level of configuration, you can add rows to your submenu, set the width and change the alignment of your submenu:

Add row: Add new row to the submenu, new row will be added to the bottom of the current submenu.
Hide when collapse: On small screen device like mobile, the menu will be collapsed. This option help you choose to display the submenu or not when menu collapsed.
Submenu Width (px): By default, each column has 200px width, but you change that value by input the width for the submenu here.
Alignment: Choose how to display the submenu, by the left, right or center of the parent item. With the Justify, the submenu will display full-width. Also, please note that with the Justify, you can’t set the Submenu Width.
Extra class: Add extra class for easier styling.

Column setting

The Column setting will display when you select one column of your menu. The column is the group of menu items display in a vertical list, and you can see there is a boundary line for each and every column.

In this level of configuration, you can: Add and remove column, set width of each column and add widget to column.

Add/remove Column: Add a new column to the right of the selected column or Remove the selected column.
Hide when collapse: On small screen device like mobile, the menu will be collapsed. This option help you choose to display the submenu or not when menu collapsed.
Width (1-12): Each submenu is divided by a grid of 12 columns, this option allow you to choose the width of the selected column, from 1 to 12.
Select Widget: choose the widget for the selected column. Please note that this option only work on the new column, which is added by the Add/remove Column option. Also you will notice that there is a link button for adding new Widget to the widget list.
Extra class: Add extra class for easier styling.

Menu Item setting

The Menu item setting will display when you select one menu item, either it’s the top level or the sub-level menu item. You can easy spot the menu item because it is the inner most boundary wrapping a Menu label or a widget.

In this level of configuration, you have some setting for the item like: add Icon or add caption (sub-title) for the item. Moreover, you also have control for sub items of the current menu item: enable/disable sub items as well as group the sub items to the current item so that they’ll always be displayed.

Submenu: If the selected item has submenu, this option allow you to Enable/Disable (show or not) that submenu. If the selected item doesn’t have submenu, choose YES will create new blank sub item for you to add widget.
Group: This option only available for item that has submenu. It allows you to group submenu to the selected item. The submenu then will always display along with this item.
Position: Allow you to move selected item to right or left column.
Extra class: Add extra class for easier styling.
Icon: Add icon for the menu item. You can input the icon class or click the link to choose icon from popup. In the current version, we only support Awesome Font icons.
Item Caption: Add the caption (sub-title) for this menu item.

NOO Menu Styling – Live preview with completely control of your Menu’s style

How to style your menu

As you probably known when using a menu, every menu has 3 common elements:

Menu Bar: the bar is where to display your menu on your site.
Top Menu: the item display on the Menu Bar, also those are the top-level items of your menu.
Sub Menu: the sub-level items, usually, the sub menu will be display when you hover on the parent item. You can have multilevel of sub menu, based on how deft is your men.

Also with each menu item, either Top Menu item or Sub Menu item, there is two states:

Normal state: when the item is display normally.
Hover state: when the mouse hover on the item. Also on the mobile device, this is when the hand ‘tab’ on the item.

Base on that common knowledge, we defined our styling options to five sections:

Menu Bar
Top Menu
Top Menu Hover
Sub Menu
Sub Menu Hover

In each section, you have many (may be too many) options for styling your menu. Those options are ranging from basic style like background, height, font… to the advanced style like: box-shadow, text-shadow…

Menu Bar styling

This section contain various styling options for your Menu Bar, those are options like height, border, background or shadow…

Before you start settings, please see this picture for better understanding about the Menu Bar styling:

You’ll see the options for Menu Bar like on this picture:

Menu Bar Height: As the name suggest, this option let you set the height of your Menu Bar.
Border: This box let you specify the style and color of the Menu Bar’s border. Our setting follow the standard styling of CSS. For more information, please check the w3schools.com
- Border width: this is used to set the width of the border. It ranges from 0 to 20px.
- Border style: this option specifies what kind of border to display.
- Border color: pick the color you want for the border.
- Border position: allow you choose which side(s) to create border, you can choose one or many from Top, Right, Bottom and Left.
Corner Radius: this option for creating rounded corners for your menu. The value ranges from 0 to 100px, showing the corner from tiny rounded to near circle rounded.
Background: this is the background for your Menu Bar. You can choose one Static color for flat style menu or Gradient colors for 3D-like menu.
Tip: the background color has transparent value so if you want your Menu Bar to be transparent (for using your theme’s Header background), you can set the maximum transparent to hide this background.
Menu Bar Shadow: these options allow you to create the blur shadow for your Menu Bar. The shadow is introduced with CSS3 and you can find more details about it on w3schools.com.
- Horizontal Length: the position of the horizontal shadow. It ranges from -20px to 20px, allows you to create shadow from left to right side.
- Vertical Length: the position of the vertical shadow. It ranges from -20px to 20px, allows you to create shadow from top to bottom side.
- Blur Distance: The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. This value ranges from 0 to 100px.
- Size of Shadow: this is size of the shadow meaning how far you want your shadow spread. It ranges from 0 to 100px.
- Shadow color: choose color for the shadow.
Padding: the padding is the space around the content (inside the border) of an element (in this case, it’s the Menu Bar). Normally, you can set the space of all forth sides of your menu Bar but we limited it to Left and Right because the Top and Bottom is automatically calculated. For more information about the padding, please see the w3schools.com.
Margin: the margin is the space around an element (outside the border). Like Padding, we limited the margin to Left and Right because the Top and Bottom is automatically calculated. For more information about margin, please see the w3schools.com.

Top Menu

This section contains the options for styling all the top level items of your menu.

Like with Menu Bar, please look at below picture for better understanding about the Top Menu styling:

You’ll see the options for Top Menu like on this picture:

Top Menu Height: here you can set the height and the vertical position of the Top Menu items.
- Height: The height of Top Menu items, this option will automatically get the maximum value from what you set on Menu Bar Height.
- Top Menu Vertical Position: if the height of the Top Menu is smaller than the total height of Menu Bar, you can change the relative position of the Top Menu by changing this option.
Border: this is similar to the Border of Menu Bar, the only different is that it’s for all the items of the Top Menu.
Corners Radius: this is similar to the Corners Radius of Menu Bar.
Font: here you can set the font style, font weight and font color of the Top Menu items. You can choose your font from the top 30 popular Google web fonts. For more information about font styling, please see the w3school.com.
- Font: choose the font family for the Top Menu items. If you want to know how each family looks like, please see the Google web fonts site on above link.
- Font style: The style of this font, normally, this option is used to specific italic text.
- Font weight: The weight of your font, specify how thick or thin characters in text should be displayed. Depend on the font family you choose, there’ll be different set of Font weight but all fonts should support regular and bold weight.
- Font size: The size of your font, you can select from 0 to 100px but the right value should be from 8 to 24px.
- Font color: the color of the menu text.
- Use UPPERCASE: if you check this checkbox, your menu text will all be transform to UPPERCASE.
Text Shadow: these options help you attaches shadow to the text of Top Menu items. The text shadow is introduced with CSS3 and you can find more details about it on w3schools.com.
- Horizontal Length: the position of the horizontal shadow. It ranges from -20px to 20px, allows you to create shadow from left to right of the text.
- Vertical Length: the position of the vertical shadow. It ranges from -20px to 20px, allows you to create shadow from top to bottom of the text.
- Blur Distance: The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. This value ranges from 0 to 100px.
- Shadow color: choose color for text shadow.
Padding: this is similar to the Padding of Menu Bar.
Margin: this is similar to the Margin of Menu Bar.
Box Shadow: this is similar to the Box Shadow of Menu Bar.

Top Menu Hover

This section contains the options for styling your top menu items when on hover state.

You’ll see the options for Top Menu Hover like on this picture:

Hover Text Color: choose the color that your text will change to when item on hover state.
Hover Text Shadow: choose the text shadow that your text will change to when item on hover state. You’ll see that these options are similar to which of Top Menu.
Hover Background: choose the background color that your menu item will change to when on hover state. These options are similar to which of Top Menu.
Hover Border Color: choose the color of the border that will be changed to when the menu item on hover state. Here we only allow you to change the Border Color, not the style and the width because changing border too much should create glitch for your menu.

Sub Menu

This section contains the options for styling the Sub Menu box and the Sub Menu items of your menu.

Sub Menu Box Border: these options are similar to those of Menu Bar. But please note that here’s for styling the box of your sub menu.
Sub Menu Item Border: these options also are similar to those of Menu Bar, but please remember that here’s for styling of one item on Sub Menu.
Font: these options are similar to those of Top Menu.
Text shadow: these options are similar to those of Top Menu.
Sub Menu Box Shadow: these options are similar to those of Top Menu.
Sub Menu Box Background: these options are similar to those of Top Menu.
Sub Menu Item Padding: these options are similar to the Padding of Menu Bar but here you have control over all 4 sides of the Menu Item: Top, Right, Bottom and Left. Also don’t forget that you are styling for one item of the Sub Menu.
Sub Menu Box Padding: This is similar to the Sub Menu Item Padding, except that this is for styling of the Sub Menu Box.

Sub Menu Hover

This section contains the options for styling the Sub Menu items when on Hover state. You will see that all the options here are similar to that of Top Menu Hover.

Custom Style

This option allows you to add custom CSS style to the menu. If you want to change the general style of NOO Menu, please look at our Basic Structure & Class to know how to add correct custom css. Also you can add style for the extra class you added to each Sub Menu, Column and Menu Item.