NOO Menu Design and Layout (advanced)

NooTheme / 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: