Hamburger Menu in CSS

Three stripes should be such an easy thing to draw. Here’s a bunch of different ways to do it on the web. That said, SVG is definitely the nicest way to handle it. A hamburger menu is so simple that we can draw it by hand in SVG.

Three rectangles, evenly distributed:

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>

Feel free to fiddle with those numbers to get the sizing and style you like.

See also  Stacked Paper arranging animation using HTML and CSS

Something awesome you might not know? SVG has rounded corners, just like CSS has border-radius! It comes in the form of the rx attribute. Check it out:

That might work better for your design if your design is softer and makes use of rounded stuff.

Leave a Reply