Pistachio the front end framework and pattern library for graze.com

contents:


    Drop down "mega" menu

    A css only drop down menu. If your drop down has too many tabs they may begin to wrap at smaller viewport sizes. The dropdown still works when this occurs, but this can be mitigated via use of the off screen menu.

    <div class="page-section page-section--alternate page-section--bleed">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <nav role="navigation">
                        <ul class="nav nav--dropdown" data-p-module="dropDown" data-dropdown-offscreen="xxs,xs">
                            <li>
                                <a class="nav__item" href="#0">
                    subscribe
                </a>
                            </li>
                            <li class="nav__dropdown nav__dropdown--full">
                                <a id="category1" class="nav__dropdown__item" href="#0">
                    shop
                </a>
                                <ul class="nav__dropdown__menu">
                                    <li class="col-sm-6">
                                        <ul class="nav__dropdown__menu__sub">
                                            <li class="nav__dropdown__menu__sub__header">
                                                snack categories
                                            </li>
                                            <li class="col-sm-6">
                                                <ul class="nav__dropdown__menu__sub__content">
                                                    <li><a href="#0">all snacks</a></li>
                                                    <li><a href="#0">new</a></li>
                                                    <li><a href="#0">best sellers</a></li>
                                                    <li><a href="#0">sweet</a></li>
                                                    <li><a href="#0">savoury</a></li>
                                                    <li><a href="#0">chocolate</a></li>
                                                    <li><a href="#0">nuts &amp; seeds</a></li>
                                                    <li><a href="#0">fruit</a></li>
                                                    <li><a href="#0">bakery</a></li>
                                                </ul>
                                            </li>
                                            <li class="col-sm-6">
                                                <ul class="nav__dropdown__menu__sub__content">
                                                    <li><a href="#0">popcorn</a></li>
                                                    <li><a href="#0">tea</a></li>
                                                    <li><a href="#0">flapjacks</a></li>
                                                    <li><a href="#0">crisp alternatives</a></li>
                                                    <li><a href="#0">dips &amp; dippers</a></li>
                                                    <li><a href="#0">protein bites &amp; toppers</a></li>
                                                    <li><a href="#0">jerky</a></li>
                                                    <li><a href="#0">superfoods</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul class="nav__dropdown__menu__sub">
                                            <li class="nav__dropdown__menu__sub__header">
                                                healthy habits
                                            </li>
                                            <li>
                                                <ul class="nav__dropdown__menu__sub__content">
                                                    <li><a href="#0">150 calories or less</a></li>
                                                    <li><a href="#0">source of fibre</a></li>
                                                    <li><a href="#0">source of protein</a></li>
                                                    <li><a href="#0">vits &amp; mins</a></li>
                                                    <li><a href="#0">sugar count</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul class="nav__dropdown__menu__sub">
                                            <li class="nav__dropdown__menu__sub__header">
                                                occasions
                                            </li>
                                            <li>
                                                <ul class="nav__dropdown__menu__sub__content">
                                                    <li><a href="#0">better baking</a></li>
                                                    <li><a href="#0">sweet treats</a></li>
                                                    <li><a href="#0">lunch boxes</a></li>
                                                    <li><a href="#0">afternoon snacks</a></li>
                                                    <li><a href="#0">after dinner treats</a></li>
                                                    <li><a href="#0">with a cuppa</a></li>
                                                    <li><a href="#0">watching a movie</a></li>
                                                    <li><a href="#0">savoury cravings</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-12 nav__dropdown__menu__footer">
                                        <a href="#0">
                            view all snacks <i class="fa fa-angle-right"></i>
                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav__dropdown">
                                <a id="blog" class="nav__dropdown__item" href="#0">
                    blog
                </a>
                                <ul class="nav__dropdown__menu" aria-labelledby="blog">
                                    <li><a href="#0">all posts</a></li>
                                    <li><a href="#0">recipes</a></li>
                                    <li><a href="#0">health</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="nav__item" href="#0">
                    about
                </a>
                            </li>
                            <li class="pull-right-sm">
                                <button class="button button--primary button--continue">get started</button>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>