20+ Beautiful CSS Off-Canvas Menus (Free Code + Demos)

A CSS3 side panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.

A simple slide out menu using just css.

Hidden side menu and hamburger animation using CSS only.

Read full tutorial by George Martsoukos on Tuts+.

Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width. Forked from Oliver Knoblich's Pen Pure CSS Off Canvas Menu.

Here's an easy way to create an iOS style, side sliding menu.

I needed an easy solution for a navigation menu on a responsive site and I wanted to avoid using Javascript to make a simple toggle. Tired of seeing jQuery plugins for this, too, I decided to make a drawer style/off-canvas menu using just CSS. Forked from Austin Wulf's Pen Pure CSS Off-Ca...

Read More

Pure CSS solution for hiding and showing sidebar.

Just playing around with the concept of offcanvas menu.

Radio buttons everywhere! It turns out that a radio input's label will still check it off even when there's no common parent. All you need to do is place the input immediately before its corresponding section. The CSS "+" selector takes care of the rest.

A fly-out navbar...'cus I've never made one ... [ Pen #7 of my 'At Least One CSS-Based Pen A Day' ]

Idea and inspiration: https://dribbble.com/shots/1719325-GIF-Sticker-App Developed in Chrome, not tested elsewhere, not production ready. Known issue: content overflow is cut when rotated. Tried different pure-CSS solutions and none worked for me. Will give credit for a non-JS solution. ...

Read More

Yet another animating CSS "hamburger" menu toggle. Written in .scss, using some lite javascript to toggle active classes. The three bars morph to up/down arrows, and an "x". Woohoo!

A very skeuomorphic take on a flat design classic. Mucking around to learn about svg animation