Hamburger Sidebar and few others components

[flibustenet]

I like this classless style because it's go further than others with a responsive navbar, tabbox for example.
I wonder if a hamburger sidebar will be out of scope ?
Same with a modal dialog maybe.

If it's out of scope, any advice will be welcome.

Thanks for the good works !

[emareg]

I also think that a hamburger sidebar would be nice but it is difficult to make with CSS only.

Another problem is that there is no nice unicode symbol that represents the hamburger. E.g. there is the math symbol ≡ but depending on the font it looks odd because length, thickness, and distance of the lines is different from the UI hamburger symbol. The triangle ▾ is less problematic in my opinion.

If you have an idea how to realize the hamburger with CSS only, let me know.

[flibustenet]

I see that 3 span is often used. Also a hidden checkbox to can switch on/off.

[HelloLudger]

You could make it in a way that the symbol is not attached by the CSS but has to be chosen when creating the menu.
Then everyone could chose their favorite (or even use a SVG or something similar).

[basteyy]

You can replace the default dropdown arrow with a hamburger icon by injecting an inline SVG via the content: property inside your media query.
Here’s a simple example:

@media (max-width: 40rem) {
  nav ul:first-child > li:first-child::after {
    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 80" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="10" /><rect y="30" width="100" height="10" /><rect y="60" width="100" height="10" /></svg>');
    margin-left: 0.4em;
  }
}

This produces the following result:

If you want to display a classic “X” close indicator when the menu is open, you can simply swap out the SVG on hover:

nav ul:first-child:hover > li:first-child::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 100 100"><rect x="0" y="45" width="100" height="10" transform="rotate(45 50 50)"/><rect x="0" y="45" width="100" height="10" transform="rotate(-45 50 50)"/></svg>');
}

However, if you want a truly interactive hamburger menu that toggles between open and closed on click, CSS alone is not enough.
You will need either the checkbox-toggle trick or a small JavaScript snippet to achieve real click-based toggling, like #24 (comment) pointed out.

Update: We could ship the hamburger as an add-on. What do you think about that, @emareg @HelloLudger ?