Files

• _mega-menu.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/mega-menu

Module Overview

Examples

<nav class="navigation">
    <ul>
        <li><a href="../../../">Home</a></li>
        <li><a href="../../../demos">Demos</a>
            
            <ul class="mega-menu row">
                <li class="span-4">
                    <h3 class="mega-menu_heading heading">Homepages</h3>
                    <ul class="list-arrow">
                        <li><a href="../../../">Homepage 1</a></li>
                        <li><a href="../../../">Homepage 2</a></li>
                        <li><a href="../../../">Homepage 3</a></li>
                        ...
                    </ul>
                </li>
                <li class="span-4">
                    ...
                </li>
                <li class="span-4">
                    ...
                </li>
            </ul>
            
        </li>
    </ul>
</nav>

To view a demo, hover over one of the appropriate menu items in the navigation on this page.

Customizing

The Mega Menu can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

To change one of the above values, pass your new value(s) to the mega-menu() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include mega-menu((
    'bottom-border' : none,
    'title-color'   : black
));