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.

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.

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.

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.

• 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:

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

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