Make it easier to customize menus

[tilomitra]

Styling menus are a pain. I would love to have it be as simple as styling buttons (basically, needing to go off only one element to style it). One of the reasons it's painful to style is because the styles and the DOM tree were initially borrowed from Y.Menu.

I propose starting from scratch to see what the simplest possible DOM structure would look like for a menu, and then think of JS integration. I think a simpler DOM + less class names + less direct descendent selectors would make menus easier to customize.

[ericf]

I propose starting from scratch to see what the simplest possible DOM structure would look like for a menu, and then think of JS integration. I think a simpler DOM + less class names + less direct descendent selectors would make menus easier to customize.

👍

[xlnt-webdesign]

@tilomitra and have no differences between primary, secondary, breadcrumbs, ... navigations.
The Navigation on http://www.microsoft.com/en-us/default.aspx is the best example of what i would like to be able to do with pure.
Look at the "Discover" submenu. It responds to the available width by swapping from vertical to horizontal and back to vertical. This is responsive ;-)

[okuryu]

I expect a horizontal menu independent of YUI.

[tilomitra]

@okuryu Are you talking about a horizontal dropdown menu?
@xlnt-webdesign Yeah, that's a good idea, but I think we still need a class name to denote horizontal vs. vertical because the 80% use-case is to maintain the orientation of the menu. If nothing else, I'll try to whip up an example that achieves the Discover Menu effect.

[okuryu]

@tilomitra Yes. Because dorpdown menu depends on Y.Menu of YUI, so I think this point has raised the hurdle for those who have no experience of using the YUI not a little.

[tilomitra]

My implementation that addresses this bug is here: #142

[tilomitra]

Whoops, closed by mistake.

[jake905]

Thought this might be the best place to ask a basic question about Pure.
How do you make dropdowns (collapsing submenus) for a vertical menu?
The website only documents an example of dropdowns on a horizontal menu.
Vertical menu was the main reason I adopted Pure for my project, now I'm stuck.

[hmaesta]

@jake905 Hello, Jake 🍎.
Questions like these should be posted on http://stackoverflow.com/ using yui-pure-css tag.

[zbyte64]

See #424 (New Menu for 0.6.0)

[jamesalley]

I guess I can close this issue, as I've ended up doing just what is discussed here. "New Menu" is out there (at least on http://stage.purecss.io) in the RC (release candidate) for Pure 0.6.0. It's certainly easier to customize. The YUI connection has been cut. I'm sure there will be new issues, questions, and proposed enhancements, but we can file those as new GitHub issues.

[jharaphula]

In this example I have tabs like Home, About Us, Services, News & Career. You can add or update tags as you want. This menu is supporting sub menu feature. Under About Us & Services I added some sub menu items for demo purpose. Technically to design this horizontal menu I used UL element of HTML. Using pure CSS I am defining color & theme to the menu. For responsive I used CSS3 media queries. In media query I configured the menu max-width to 750px. 750px is nothing but the total width of my horizontal menu (including all tabs)... https://goo.gl/VwTusI