Style 3: Block navigation with images

You can skip down the page to read about:

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

The code structure to this navigation design pattern is the same as style 2 except that you use an additional img tag and use the style3 class. Everything else about the construction of the navigation block (using x2 to x5, grid layout, etc.) is the same.

Standard nav block

<nav class="style3 callto">
    <ul>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 1</p>
            </a>
        </li>
    </ul>
</nav>

You can continue to use x2, x3, x4, or x5 as appropriate. For example:

<nav class="style3 callto x4">
    <ul>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 1</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 2</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 3</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 4</p>
            </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 would see this:

<nav class="style3 callto x3">
    <ul>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 1</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 2</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 3</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 4</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 5</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 6</p>
            </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:

Generally, though, you should always try to keep the text to a minimum – ideally on one line.

<nav class="style3 callto x3 autoheight">
    <ul>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 1</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 2 which has a much longer title</p>
            </a>
        </li>
        <li>
            <a href="#" class="palette2 swatch6">
                <img src="http://www.sussex.ac.uk/images/nav_blocks/default-hot-ticket2.jpg" />
                <p>selection 3</p>
            </a>
        </li>
    </ul>
</nav>

Curve with multiple sizes

By default, this design pattern has a sharp-corner appearance. You may find a slightly curved interface better suited to some of your content, in which case you can apply the curve class.