State Template v5 Megamenu

The functionality in both template v5.5 and template v5 is the same: the megamenu displays dropdown panels for sub navigation when the user clicks on a primary link. The difference is layout and display of the sub-navigation units. Tempalte v5.5 uses .flex class in .second-level-nav container. Template v5 doesn't use flex class. It uses ul list to display grid like sub nav links.

In the template distribution this markup can be found in /sample/modules/nav-megamenu.html.

Fixed Units

When you open the mega menu, you may notice a table or grid like look to the sub nav links. In order maintain the grid look the items need to have a .unit class applied. Each unit increment multiplies it's base value by it's unit value.

.unit1 = 50px
.unit2 = 100px
.unit3 = 150px

Units become useful when you wish to mix various content into the mega menu while maintaining the grid-like look. For example, a link with a description would likely use a .unit2 class making it twice as tall as a link with a class of .unit1

Mixed Content Within Navigation

The megamenu allows for the display optional images or promoted content to the left or right of the sub navigation links. It is also possible to display a short description below each sub navigation link. Use .with-image-left or .with-image-right on the grid container containing the media.

<div class="quarter with-image-left">
    <div class="nav-media" style="background:url('/sample/images/sample-nav-image2.jpg')"></div>
</div>

An example of promoted content might be a public profile, featured service, or a news article.

Using Columns

The megamenu uses the available grid classes to divide the menu into multiple columns seperating links from media or promoted content. It's not without it's limitations. For example, images or mixed content may be on the left or right of the links, but cannot split links.

Note: It's not necessary to break up the sub menu links into columns. CSS does this automatically and alows for only one list, making it more future friendly and accessible.

Positioning

When positioning an image or promoted content on the left an .offset-[value] class must also be applied to the link's grid container. The offset value is equal to the images grid container.

Offset Example:

<div class="sub-nav">
    <div class="three-quarters offset-quarter">
        <ul class="second-level-nav">
            <li class="unit1">
                <a href="/" class="second-level-link">Link 1</a>
            </li>
            ...
        </ul>
    </div>
    
    <div class="quarter with-image-left">
        <div class="nav-media" style="background:url('/sample/images/sample-nav-image2.jpg')"></div>
    </div>
</div>