yui/pure — pull request #142 by tilomitra (2013-07-19 17:51:43+00:00)
Title: Revamp Pure Menu

This commit makes Pure Menu smaller, more responsive, and easier to customize. This change does break back-compatibility, as I have removed some classnames and some functionality.

## What's in this PR
* **Remove the close relationship with YUI's `Y.Menu`**. This helps to get rid of a lot of CSS which wasn't needed 80% of the time.
* **Remove `.pure-menu-open`**: This also helps to get rid of adjoining class selectors, which makes it easier to customize menus.
* **Remove dropdown menu CSS**: Looking to get some feedback here. How important are dropdown menus?
* **Add `.pure-menu-responsive` and `.pure-menu-toggle` to make responsive horizontal menus**: Yay!
* **Make pure menus *really* easy to customize**: More on this below

## Responsive Horizontal Menu

This is something that I've been wanting for a while. You can now make responsive menus that can show and hide their links on small screens. Doing this is really easy, and the site will have JS snippets that you can copy/paste in to achieve the necessary behavior.

This is done by adding two new classnames, `.pure-menu-responsive` and `.pure-menu-toggle`. Since you may not want *every* horizontal menu to be responsive, you have to add the `.pure-menu-responsive` class name. Responsive menus also need an `` element with the `.pure-menu-toggle` class name so that it can show/hide menu items on small screens.

### HTML

Here's the HTML for a responsive menu:

```html

Site Title
Open

Home

Flickr

Messenger

Sports

Finance

```
That'll give you something that looks like this on small screens:

![menu closed](http://f.cl.ly/items/1s2D2A201b0M0r3m1n0O/Screen%20Shot%202013-07-19%20at%201.47.02%20PM.png)

## Customizing the menu

Menus were probably the hardest part of the library to customize. You would have to write a ton of messy CSS to do it. Not anymore! This is how you customize a menu now:

### HTML

Here's the HTML for a responsive horizontal menu. I've added the class `.pure-menu-custom` to base my styles off of:

```html

Site Title
Open

Home

Flickr

Messenger

Sports

Finance

```

### CSS
There are various parts of the menu that you can tweak. As you'll see below, customizing the menu is easier because there aren't any surprises.

```css
/* Give the menu a red background, and a black border */
.pure-menu-custom {
background: red;
border:1px solid black;
}

/* Make all links white */
.pure-menu-custom a {
color: white;
}

/* Make links orange when I hover or focus */
.pure-menu-custom a:hover,
.pure-menu-custom a:focus {
color: orange;
}

/* Make the disabled menu item yellow */
.pure-menu-custom .pure-menu-disabled a,
.pure-menu-custom .pure-menu-disabled a:hover
{
color: yellow;
}

/* Make the menu title blue */
.pure-menu-custom .pure-menu-heading {
color: blue;
}

/* Make the current selected menu item bold */
.pure-menu-custom .pure-menu-selected {
font-weight: bold;
}
```

## Additional thoughts on Dropdown Menus

I mentioned earlier that this version of Pure Menu drops all CSS to make dropdown menus. I think we should take a leaf out of Bootstrap's books here, because I think they approach dropdowns in the correct way. They have a dropdown module (basically some element with nested `

`) and it behaves as a singular dropdown item. This element can be styled as a menu item or a button or something else, so they can reuse it and it isn't tied down to a specific module. If we do want dropdown CSS in the library, I think it should be built in that way.

## Tests

I've tested this on IE8+, Latest Chrome/FF/Safari, and iOS 6. Haven't tested this on Android yet, so I'll do that and report back here. The manual test page has been updated with the new menu

## Next Steps

- [ ] Make decision on drop-down menu support
- [ ] Verify tests in Android 4.x