New Menu

[jamesalley]

This PR significantly revises Tilo Mitra's second take on Menus. I significantly reworked everything and cooked up new examples and tests. Tilo's core insight has been retained: that lower-specificity selectors via additional classnames will make customization easier.

Pros:

• More easily customizable, with lower-specificity selectors.
• Less default CSS properties in place– the menus are more bare-bones, so there's less to override. You're more likely to add on top instead of overriding with the new Menu.
• More responsive, with the inclusion of horizontal responsive menus. This feature has been removed from the version currently in development. It was not accessible and was rather opinionated and clunky. Sorry, but I had to jettison the concept. However, I added new responsive menu examples to the Layouts page.
• New: CSS-only dropdowns/submenus. We recommend augmenting your menus with JavaScript for accessibility and keyboard navigation, but adding pure-menu-allow-hover class will enable menus which reveal on hover, which is sometimes desirable and a nice way to handle the no-JS case.
• New: Menu is now more modular, broken up into files for core, horizontal, dropdowns, scrollable, and skin; you can get hyper-efficient by creating a rollup of just what you need. The menus.css rollup is still very small, though.
• New: scrollable menus. Adding a pure-menu-scrollable class to make your menu scrollable and flickable when there isn't enough room to display the whole thing.
• Any old Y.Menu cruft has been removed.

Cons:

• Not backwards compatible with Pure 0.5. You'll need to add additional classnames such as .pure-menu-item and .pure-menu-link into your markup. However, this is not difficult.

How to Upgrade:

• Remove the pure-menu-open class. It's not used anymore.
• Add pure-menu-list to your menu's <ul>.
• Add pure-menu-item to any <li>.
• Add pure-menu-link to any <a>.
• Refactor your customizations. Many old customizations (e.g. .pure-menu > li > a { ... }) may still work, since the overall markup structure has not changed. Consider adding pure-menu-custom-foo classes and writing your customizations on top of them instead of modifying Pure's classes.
• You'll probably need to tweak pure-menu-item and pure-menu-link padding to suit your design.

[yahoocla]

CLA is valid!