Responsive Pure Menus

How to use

First, pull in Pure via the link tag. You actually don't want to pull in the Pure Menus module, since you'll be using this instead. So we'll pull in everything except menus using the combo handler. Copy paste this in:

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/grids-min.css&pure/0.3.0/forms-min.css&pure/0.3.0/tables-min.css">
        

Now, add in the responsive menus CSS. Just copy/paste the CSS from this gist.

Responsive Menu

You can now make your menus responsive. Just add the pure-menu-responsive class to your pure-menu element, and add the following element before the <ul>:

    <a href="#" class="pure-menu-toggle">Open</a>
        

You'll also need some JavaScript to toggle styles. Add this in if you're using YUI (write something similar if using something else)

YUI().use('node', function (Y) {
    var ACTIVE = 'pure-menu-active';

    //create a single event listener on the body, that listens to
    //click events on all `.pure-menu-toggle` elements.
    Y.one('body').delegate('click', function (e) {
        e.preventDefault();

        //gets the parent. This is the `pure-menu` element.
        var parent = e.currentTarget.get('parentNode');

        //toggles the `pure-menu-active` class on the parent element
        parent.toggleClass(ACTIVE);

        //toggles the text within the `pure-menu-toggle` element.
        if (parent.hasClass(ACTIVE)) {
            e.currentTarget.set('text', 'Close');
        }
        else {
            e.currentTarget.set('text', 'Open')
        }
    }, '.pure-menu-toggle');
});
            

Final result

Resize your browser to see the responsiveness.

Customizing a Menu

Customizing a menu is really easy. First, start by adding a class name to your menu. In the example below, we've added the pure-menu-custom class name to the menu.

Change menu styles

            .pure-menu-custom {
                background: red;
                border:1px solid black;
            }
        

Change menu links styles

            .pure-menu-custom a {
                color: white;
            }

            /* hover color for links */
            .pure-menu-custom a:hover {
                color: orange;
            }
        

Change disabled link styles

            .pure-menu-custom .pure-menu-disabled a,
            .pure-menu-custom .pure-menu-disabled a:hover
             {
                color: yellow;
            }
        

Change heading styles

            .pure-menu-custom .pure-menu-heading {
                color: blue;
                font-size: 150%;
                font-weight: bold;
            }
        

Change selected item styles

            .pure-menu-custom .pure-menu-selected {
                font-weight: bold;
            }
        

Final result

Of course, this menu looks ugly, but you get the idea. :)

Non-responsive Horizontal Menu

This menu is the same as the current Pure Menu. This only difference is that you no longer need to provide the pure-menu-open class name.

Vertical Menu

This menu is the same as the current Pure Menu. This only difference is that you no longer need to provide the pure-menu-open class name.

Fixed Menus

Fixed menus can be created by adding the pure-menu-fixed class name to the wrapper. This will fix a menu to the top of the page. You can see an example of this at the top of this page.

Paginator

• «
• 1
• 2
• 3
• 4
• 5
• »