Menus

Simple CSS for menus.

Horizontal Menu

To create a horizontal menu, add the pure-menu-horizontal class name. You can mark the active list element by adding the pure-menu-selected class to the list element.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

To add headings to your menu, place some content outside the <ul> element and wrap it in an <a> element with the pure-menu-heading class name.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">Site Title</a>

    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

Vertical Menu

Menus are vertical by default. You need only add the pure-menu class to style the menu, and the pure-menu-open class to ensure that it is visible.

<div class="pure-menu pure-menu-open">
    <a class="pure-menu-heading">Yahoo! Sites</a>

    <ul>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li class="pure-menu-heading">More Sites!</li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">OMG!</a></li>
    </ul>
</div>

Add Dropdowns to Menus

Adding dropdowns to menus requires the use of JavaScript. For example, YUI's Y.Menu module adds dropdown functionality and the ability to create JavaScript menus.

<div id="demo-horizontal-menu">
    <ul id="std-menu-items">
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li>
            <a href="#">Other</a>
            <ul>
                <li class="pure-menu-heading">More from Yahoo!</li>
                <li class="pure-menu-separator"></li>
                <li><a href="#">Autos</a></li>
                <li><a href="#">Flickr</a></li>
                <li><a href="#">Answers</a></li>
                <li>
                    <a href="#">Even More</a>
                    <ul>
                        <li><a href="#">Horoscopes</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">OMG</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

To mark a link as disabled, add an <a> element with the pure-menu-disabled class name. Disabled items appear faded and do not inherit hover styles.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">Site Title</a>

    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>
    </ul>
</div>

Paginators

To create a paginator control, add the pure-paginator classname to a <ul> element. For paginator controls that look like buttons, add the pure-button class name. For a plainer paginator, you can omit this class.

<ul class="pure-paginator">
    <li><a class="pure-button prev" href="#">&#171;</a></li>
    <li><a class="pure-button" href="#">1</a></li>
    <li><a class="pure-button pure-button-active" href="#">2</a></li>
    <li><a class="pure-button" href="#">3</a></li>
    <li><a class="pure-button" href="#">4</a></li>
    <li><a class="pure-button" href="#">5</a></li>
    <li><a class="pure-button next" href="#">&#187;</a></li>
</ul>