[Feature Request] Hamburger Menu

[jensenbox]

I see that the example for AMP uses the AMP Sidebar component. I would love to see a function that works nearly identically to that but built in.

Ideally it would show as a collapsed menu at when the screen size is too small to show the full nav and be fully expanded as a nav when the screen is large enough.

If you are prescribing AMP as this solution I would love a declaritive statement to that fact - or whatever method you would condone.

Thanks for the great product!

[lucaslarroche]

Hi @jensenbox,

Here is a link to a comment I made in another issue. https://github.com/picocss/pico/issues/19#issuecomment-881861597

Icons could be a nice addition but are not exactly in the Pico spirit. Pico is more like a "Css reboot on steroids", focused on semantics HTML elements. ...

But you are right. Both a hamburger menu and a collapsing component are pretty generic and could land one day in Pico. I'm open to Pull Requests.

For the AMP example, I just used the <amp-sidebar> element in the AMP documentation.

[jubishop]

+1 this is the one feature I was looking for and couldn't find in Pico.

[KiranMantha]

@lucaslarroche and @jubishop , i wrote a series of articles on how github has its own UI controls out of pure semantic css. And one of the episodes is about hamburger menu. I got the same encouragement to bring the dropdown component for PIco. Here's the link for the article about hamburger menu: How they made controls at Github?. Probably this may help to have an hamburger in PicoCSS 😄

[DNWEIJ]

Hello,

I have made a simple hamburger with silde out menu. Used https://codepen.io/nlfonseca/pen/RGqRWN for inspiration :-)

I have created a copdepen with css (4 classes) to have a hamburger menu working: https://codepen.io/dnweij/pen/VwdQKeL

Hope this helps ayone :-)

[walterdavis]

This looks very nice, although the background of the slide-out menu needs some work for when the window is shorter than the contents (or you expand all the submenus to be taller than the viewport). Scrolling the menu reveals part of the white page background.

Walter

On Nov 21, 2022, at 4:56 PM, DNWEIJ @.***> wrote:

Hello,

I have made a simple hamburger with silde out menu. Used https://codepen.io/nlfonseca/pen/RGqRWN for inspiration :-)

I have created a copdepen with css (4 classes) to have a hamburger menu working: https://codepen.io/dnweij/pen/VwdQKeL

Hope this helps ayone :-)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

[brentarias]

I agree with @jubishop that PicoCSS not having a responsive hamburger menu is the "elephant in the room." Consequently I have created a responsive CSS-only hamburger menu for PicoCSS (no JavaScript).

I made the colors "peculiar", simply to help showcase its appearance. In a real deployment of this hamburger menu, I would not be asserting these colors.

Notes:

• It is purely flexbox, and attempts to be a "seamless" integration with PicoCSS.
• To place the full-screen menu on the left, instead of on the right, simply add flex-direction: row-reverse to the CSS selector for the nav element (or nav.container, in this case). Otherwise, delete that directive and it will properly "swap sides".
• It works both with and without the position: fixed property specified in the nav CSS selector.
• It was designed to work with a site having the body (or enclosing element) set with the container class.
  • It is compatible with the container class, on condition the nav element itself is declared with the container class. Note: this latter condition was necessary because once position: fixed is declared, and nav exits the "flow" of the document, it no longer has container rules applied which indicate the proper dynamic width. But if container is attached directly to the nav, that problem is solved.

Issues:

• I did not bother (yet) to make the hamburger icon animated. That certainly could be done, but this is as much as I've created so far.
• I'm sure more could be done to make it even more "seamless" for PicoCSS, such as making the container class reference optional, but this is a start.

I suggest, let's go for it...let's polish this and make it officially part of PicoCSS!