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 nav__item--active" href="#0">subscribe</a>
                            </li>
                            <li class="nav__dropdown">
                                <a id="blog" class="nav__dropdown__item" href="#0">my graze</a>
                                <ul class="nav__dropdown__menu" aria-labelledby="blog">
                                    <li><a href="#0">my graze home</a></li>
                                    <li><a href="#0">in my box</a></li>
                                    <li><a href="#0">my favourites</a></li>
                                    <li><a href="#0">my rewards<span class="reward-points" data-nav-rewards-points="">1</span></a></li>
                                </ul>
                            </li>
                            <li class="nav__dropdown nav__dropdown--full">
                                <a id="category1" class="nav__dropdown__item nav__dropdown__item--active" 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 nav__dropdown__item--active">
                                                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" class="nav__dropdown__item--active">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
                        </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>
                                <a class="nav__item" href="#0">my account</a>
                            </li>
                        </ul>
                    </nav>
    
                    <div class="nav__get-started">
                        <button class="button button--primary button--continue">get started</button>
                    </div>
    
                    <nav role="navigation" class="hidden-sm hidden-md hidden-lg">
                        <ul class="nav nav--dropdown">
                            <li>
                                <a href="#" class="nav__item nav__item--account">
                    Already a grazer? <span>login</span>
                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>