Big Menu

Overview

The big menu can be used to display related navigation in a space saving manner.

Clicking on a big menu navigation item causes a drop down list of URLs to display.

Example
WCMS use
MVC.net use
Code

 <div class="four columns">
        <ul class="big-menu-container">
            <li class='alpha thumbnail big-menu'>
                <i class=
                "icon ts-icon orange trading-standards-icon cake large"></i>
                <p>Baked goods <b class="caret"></b></p>
                <ul>
                    <li>
                        <a href="#">Supplying bread for animal feed</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="four columns">
        <ul class="big-menu-container">
            <li class='alpha thumbnail big-menu'>
                <i class=
                "icon ts-icon red trading-standards-icon certificate large"></i>
                <p>Buying goods <b class="caret"></b></p>
                <ul>
                    <li>
                        <a href="#">At the filling station</a>
                    </li>
                    <li>
                        <a href="#">Buying at home - 'off premises'
                        contracts explained</a>
                    </li>
                    <li>
                        <a href="#">Buying by internet, phone and mail
                        order</a>
                    </li>
                    <li>
                        <a href="#">Buying from business premises - on-premises
                        contracts explained</a>
                    </li>
                    <li>
                        <a href="#s">Counterfeit goods</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="four columns">
        <ul class="big-menu-container">
            <li class='alpha thumbnail big-menu'>
                <i class=
                "icon ts-icon red trading-standards-icon screen large"></i>
                <p>Distance sales <b class="caret"></b></p>
                <ul>
                    <li>
                        <a href="#">Consumer contracts - distance sales</a>
                    </li>
                    <li>
                        <a href="#">Internet auction sites and marketplaces</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release