ÄûÃÊÊÓƵ

• Homepage
• Navigational boxes
• • Style 1: Single line navigation
  • Style 2: Block navigation
  • Style 3: Block navigation with images
• Feature boxes
• Grid system
• Accordions
• Tables
• Forms

Style 2: Block navigation

You can skip down the page to read about:

• standard nav blocks
• a grid of blocks
• auto-height adjustment.

The code structure to this navigation design pattern is the same as style 1 except that you now use style2 and can define the number of blocks across the page from one to five.

Standard nav block

<nav class="style2 callto">
    <ul>
        <li><a href="#" class="palette2 swatch6">selection 1</a></li>
    </ul>
</nav>

If you wanted two items across you would use the x2 class, such as:

And continue to use x3, x4, or x5 as appropriate:

<nav class="style2 x5 callto">
    <ul>
        <li><a href="#" class="palette2 swatch6">selection 1</a></li>
        <li><a href="#" class="palette2 swatch6">selection 2</a></li>
        <li><a href="#" class="palette2 swatch6">selection 3</a></li>
        <li><a href="#" class="palette2 swatch6">selection 4</a></li>
        <li><a href="#" class="palette2 swatch6">selection 5</a></li>
    </ul>
</nav>

Grid of blocks

This navigation element supports automatic overflow of elements, so depending on what you set the list size to be it will attempt to retain that size across the screen. For example, setting the list size to be x3 and having six elements in the list, you'd see this:

<nav class="style2 x3 callto">
    <ul>
        <li><a href="#" class="palette2 swatch6">selection 1</a></li>
        <li><a href="#" class="palette2 swatch6">selection 2</a></li>
        <li><a href="#" class="palette2 swatch6">selection 3</a></li>
        <li><a href="#" class="palette2 swatch6">selection 4</a></li>
        <li><a href="#" class="palette2 swatch6">selection 5</a></li>
        <li><a href="#" class="palette2 swatch6">selection 6</a></li>
    </ul>
</nav>

Auto-height adjustment

By default the nav boxes will conform to the size of the content within them. However, sometimes you may wish to have all the boxes in the list the same height. This can be achieved by using the autoheight class.

Here's an example:

<nav class="style2 x4 callto autoheight">
    <ul>
        <li><a href="#" class="palette2 swatch6">selection 1</a></li>
        <li><a href="#" class="palette2 swatch6">selection 2</a></li>
        <li><a href="#" class="palette2 swatch6">selection 3.  Lorem ipsum dolor sit amet, aliquet. Parturient conubia vitae inceptos lobortis enim curabitur ante dui: urna mollis curae euismod faucibus porta, mattis.</a></li>
        <li><a href="#" class="palette2 swatch6">selection 4</a></li>
    </ul>
</nav>