Revamp Pure Menu #142
Revamp Pure Menu #142
Conversation
This commit makes .pure-menu smaller, more responsive, and easier to customize. - Remove `.pure-menu-open` - Remove dropdown menu CSS - Add `.pure-menu-responsive` and `.pure-menu-toggle` to make responsive horizontal menus. - Make pure menus *really* easy to customize
|
@ericf Thoughts on dropdown menu? |
|
My two cents: I'd like to see dropdown menus in Pure |
ghost
assigned 
| fixedMenu.toggleClass('pure-menu-open'); | ||
| }); | ||
|
|
||
| }).use('node-base', function (Y) { |
There was a problem hiding this comment.
It's the simple JavaScript code. So I'd like to test with the pure JavaScript that doesn't use YUI if possible, but is this possible? I expect to be able to present a drop-down menu that doesn't depend on YUI in the example of pure-site on the end, make sense?
There was a problem hiding this comment.
@okuryu You should have no problem with that.
With pure 0.1 and 0.2.* I wrote a small jQuery function for example and it's working perfectly (you can find it here, for the usage just go back and read the README of that repo)
When I have some time I check if it works with this code and eventually update it but I bet it will be pretty straightforward.
There was a problem hiding this comment.
@mseri I don't care what library Pure's users use (of course jQuery is ok). My goal is lower the barriers for Pure newbies by leave any libraries at purecss.io. It may also be nice to provide some examples of drop-down menu by a few JS libraries. Anyway, perhaps we should test the drop-down menu with pure JS?
There was a problem hiding this comment.
@okuryu of course! I was just pointing out that it is not that hard to make it work without YUI. In the future I could write the code for some different frameworks (and a priori my code works with many different replacements of jQuery like zepto) and it can probably be translated to pure js easily, I just have no time at the moment to do it.
There was a problem hiding this comment.
In the future I could write the code for some different frameworks
Yes. That'll be fine, too.
There was a problem hiding this comment.
When we add this to the website, we'll have snippets using vanilla JS, jQuery and YUI.
|
Agree completely on the dropdowns, it will be more useful when it isn't tied to a specific module. How can I help get this live? |
|
@oskarrough I haven't started work on the dropdowns. The first thing we would need is some CSS and a tiny bit of JS that toggles classes and works in all of our supported environments. I was thinking something like this for the HTML (subject to change, of course): <!-- this would probably be an inline-block element to work with menus and buttons well -->
<div class="pure-dropdown">
<!-- this could also be a .pure-button or a pure menu item -->
<a class="pure-dropdown-toggle" href="#">A dropdown link</a>
<ul class="pure-dropdown-menu">
<li>...</li>
<li>...</li>
</ul>
</div>If we can reduce the number of HTML elements while still following SMACSS and being able to support all of our required environments, then that would be ideal. |
|
If we could come up with a solution that works out of the box with the proposed markup but also allows the dropdown-toggle to define a custom target, it would be great. This way it could be used for navigation toggles, panels, anything really. <button class="pure-dropdown-toggle" data-target="pure-custom-panel">Toggle panel</button>
<div id="pure-custom-panel"></div>Regarding supported environments and JS, is jQuery assumed? |
|
This looks like an awesome improvement. I would be happy to test on my Android 4.x phone and tablet |
|
Awesome improvements. When can we except to see it in master? |
|
We're aiming to get this in for Pure 0.4.0, provided there aren't any On Fri, Aug 30, 2013 at 8:47 AM, Thomas Persson notifications@github.comwrote:
Tilo Mitra |
|
Can you build 0.4.0 or 0.3.0 right now or is it now in a good state? |
|
@pspeter3 We just released 0.3.0-rc-2, so we should be releasing 0.3.0 next week if everything checks out. It'll be another few weeks before 0.4.0. If you want to use this version of the Menu now, I recommend just pulling the |
|
What dependencies does this need, exactly? Is it supposed to work with only http://yui.yahooapis.com/pure/0.3.0-rc-2/pure-min.css? |
|
@zetalevel This has no dependencies other than Normalize, and so it will work with any version of Pure. There is an example of a menu that uses responsive grids, and that depends on this proposed grid system. However, you could just not use those classnames, and still get the rest of the new menu to work. That example just demonstrates that menus play nice with grids. |
|
OK. What am I doing wrong, then? (Thank you for the wonderful Pure.) |
|
I would like to see Dropdown's continue to be supported but, the way Bootstrap implements it is nice. |
|
This is an awesome change and I love what you've done with the framework. Do we have a ETA on when the responsive menus will be supported? No worries if not. Thanks! |
|
@cy137 we recently had a great discussion on how we want to handle responsive features in Pure: http://blog.purecss.io/post/65656116532/last-weeks-yui-open-roundtable-featured-an |
|
Would you see dropdown menus could be done as pure css, without requireing javascript? This actually seems to present a pure css solution even for mobile menus: The solution is live on: http://gps.nichols.edu |
|
I find myself overriding this css for horizontal menus: .pure-menu.pure-menu-horizontal > ul {
height: auto; /* reset pure's value */
top: auto; /* reset pure's value */
min-height: 2.4em;
bottom: 0;
}this way the buttons stay within their container when small screensizes makes them divided across multiple rows. |
|
I propose moving the dropdown menu question to a separate issue; there are too many badly needed components in this issue to hold it up. Let's get it out sooner than 0.40. |
|
Are menus actually working at the moment? |
|
@l4zl0w are you adding the required javascripts? |
|
Tilo thank you for continuing to address such issues. We are |
| @media (max-width: 480px) { | ||
| .pure-menu-horizontal { | ||
| width: 100%; | ||
| @media (min-width: 48em) { |
There was a problem hiding this comment.
This whole file should be killed, since it has media queries in it.
There was a problem hiding this comment.
There is no way for this to work for people since we have no idea how many items are in the menu, and that's a variable.
There was a problem hiding this comment.
@ericf Read the section Responsive Menus and Overriding Media Queries in the PR Description.
There was a problem hiding this comment.
Yeah I read that. So if people are going to have to add media queries anyways, we should remove this. If I have a menu with two–three items in it, it might not need to collapse on an iPad in portrait, or an larger screen phone, etc.
There was a problem hiding this comment.
We should still provide the option of linking to this file from the CDN. I am cool with excluding it from the build roll-ups, so it has to be pulled in separately.
|
any working example? desktop browser: normal horizontal menu with dropdowns |
You'll see the example that you are referring to on that page. For an HTML snippet, check the Responsive Menus section in the PR description. |
|
cool! but if you resize the browser window till the toggle is display and toggle it, it shows the submenu items (vertical ul) isn't that an issue? |
|
@roydekleijn Good catch. I'll add in a fix for that. Apart from that, waiting for @ericf to sign off on this stuff, or to propose a list of changes so we can get this into core. |
@tilomitra I'll review this sometime next week after the long weekend. |
|
Awesome! I have another question: Ps. Is there a roadmap somewhere? I like to contribute as well to this awesome project. |
|
@roydekleijn Do you mean collapsing and expanding sub-menu items? Because in this PR, you can collapse and expand the primary menu items. |
|
Yes you can. But that won't work on smaller mobile screens.. Do you have any idea when you will commit the fix? I'm keen on to continue with the implementation of this great feature. |
|
@roydekleijn Sorry, still not sure exactly what feature you're referring to. Can you give me an example, or clarify it a bit? What won't work on smaller mobile screens? |
|
Ok, let me elaborate the possible issues: Issue1: if you resize your browser window to a smaller screen, then the toggle will appear. When you click on it the menu will appear. That's fine! But if you resize your browser window again to a bigger screen then the toggle will disappear but also the vertical menu remains displayed Issue2: imagine you have a menu with dropdowns. On a smaller screen the vertical menu will appear with the dropdowns in expanded state. Question was if it is possible to display it the first time in collapse state, but only if you click on it it will be expanded. Does it make more sense? Verstuurd vanaf mijn iPhone
|
|
|
Cool, really looking forward to it :) On Sun, Aug 31, 2014 at 6:37 AM, Tilo notifications@github.com wrote:
|
|
@jamesalley I used to agree that child items shouldn't have a classname in order to keep markup efficient and small, but the truth is that I'd rather have more classnames than increased CSS specificity. For example, if I wrote this: <div class="pure-menu">
<ul>...
<li>...
...
</div>Then my CSS has to be triggered off .pure-menu li a { color: red; }The above has a specificity of As you can see, once we get into a specificity battle, it's a lot harder understand what CSS rules will be applied. It's much easier to give everything their own classname, which makes it simple for developers to over-ride those classes when needed. This was the logic that went into the HTML for this release. Re JS/noJS styles, I agree with you, and we need to figure that out. Menus are probably one of the only places where we would need such a thing. |
|
@ericf Let me know when you get a chance to go through this. |
|
Let me know if I can help you with testing both fixes. Thanks, Roy |
|
Thanks Roy. Been a little swamped here, but I'll try to get in those fixes asap. |
|
I fixed the issues mentioned earlier. .pure-menu-is-active .pure-menu-children { jQuery: (sorry for the formatting) $( document ).ready(function() { |
|
I pulled this PR into a branch and I'm using it with the pure-site. This gives me some idea of what it would be like for someone to upgrade to 0.6 at which point they'll have to deal with menus since this is not backwards-compatible. I'm listing the changes I'm noticing which were not described in this PR which may impact users:
These doesn't affect users per se, but I wonder if they are important:
|
|
You shouldn't need to add anything apart from a class name to the parent UL to make a menu become a "pure" menu. |
|
I'm moving forward with work on this PR. There are some good ideas and features that folks seem to want. Real concerns are addressed. The PR is not perfect, however; I'm going to have to make more than a few changes before it's ready for prime-time. But I will not be changing the heart of this PR, just fixing bugs and improving some of the default styling, which was stripped to the bone by this PR. As for pagination being removed, I eventually learned that Tilo and Eric had been planning to remove it for quite some time, so he removed it along the way. |
|
Closing this PR, as I have a new PR going in its stead, with some refinements. |
|
This is a beautiful example of Responsive horizontal menu using pure CSS http://jharaphula.com/responsive-horizontal-menu-using-pure-css |
|
@jharaphula I was checking that link out and it didn't appear to be using pure...but it's your site, so you should know. Can you explain? (Might want to move this chat topic to Gitter so as not to pollute this issue.) |
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
Y.Menu. This helps to get rid of a lot of CSS which wasn't needed 80% of the time..pure-menu-open: This also helps to get rid of adjoining class selectors, which makes it easier to customize menus..pure-menu-responsiveand.pure-menu-responsive-toggleto make responsive horizontal menus: Yay!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-responsiveand.pure-menu-responsive-toggle. Since you may not want every horizontal menu to be responsive, you have to add the.pure-menu-responsiveclass name. Responsive menus also need an<a>element with the.pure-menu-responsive-toggleclass name so that it can show/hide menu items on small screens.HTML
Here's the HTML for a responsive menu:
That'll give you something that looks like this on small screens:
Open State:
Dropdown Menu
Here's the HTML for a dropdown menu:
Here's what it looks like:
Customizing the menu
The menu now has various child classes that you can hook into. Here they are:
.pure-menu: Hook into this to style the menu's bounding box..pure-menu-list: All<ul>tags within a menu should have this class..pure-menu-item: All<li>tags within a menu should have this class..pure-menu-link: All<a>tags within a menu should have this class..pure-menu-has-children: A<li.pure-menu-item>tag that has a nested menu should have this class..pure-menu-children: A<ul.pure-menu-list>tag that is a child of an <li.pure-menu-item> tag (nested menu) has this class..pure-menu-heading: A<a>tag that is outside the<ul.pure-menu-list>and is the heading for the menu has this class..pure-menu-responsive-toggle: A<a>tag in a responsive menu that sits outside the<ul.pure-menu-list>and is responsible for showing/hiding the toggle button has this class..pure-menu-is-active: In a responsive menu, this class signifies when a menu is "open" (ie: showing its submenus).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 some classes with the
-customsuffix to base my styles off of. I recommend doing the same when customizing any Pure component.CSS
Here's what the CSS would look like. Notice how I've added my own class to the menu above to make it easier to style. However, I don't have to use any descendent selectors anymore.
Looks like this:
Responsive Behavior and overriding Media Queries
To add the responsive behavior to menus, we obviously need to have a media query. I recommend doing the same thing that we did with Grids. Have
pure-menu-responsive.min.cssavailable on the CDN, with a sane media query default (I recommend48em), but allow people to override this by not getting that file from the CDN, and instead adding the following CSS inside theirapp.css:Responsive Behavior and JavaScript
You need to have some JS on the page to toggle the responsive menu. This would be something that users can copy/paste from the Pure site.
Example using YUI:
Tests
I've tested this on Latest Chrome/FF/Safari, and iOS 7. Haven't tested this on Android or IE yet, so I'll do that and report back here (help would be appreciated 😄 ). The manual test page has been updated with the new menu.
Next Steps