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

Set up any external links for your Big Menu

Before creating your Big Menu, you need to make sure that any external links required in the Big Menu have been set up.

Creating a Big Menu Link Item

Using the Content Editor you need to create individual Big Menu Group content items.

Within the Content Editor navigation tree, navigate to:
Common content > Navigation > Big Menu

 

Right click on Big Menu (or the relevant sub-folder) and select ‘BigMenuLink’ , naming the item as appropriate

Within the Big Menu Link item populate the following fields:

  • BigMenu_Title
  • BigMenu_IconStyle
  • BigMenu_IconColour

Next select the required BigMenu_URLs

You will need to browse to Common Content to find any external links you require.

Building the Big Menu


1. From the Experience Editor, in a placeholder press the 'add here' insert option
2. Browse Renderings > Building Blocks > Grids > Link Grids > Link Grid

Then within each grid place holder, add a Big Menu Group, then select the Big Menu Group you require.

If you need to add a second row of Big Menu Items, highlight the link grid that you previously added, then use the ancestors icon to find the immediate parent. Press 'Add here' and add another Link grid.

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