Hamburger menu, drawer menu, off-canvas menu: Whatever you call it,
hiding a website’s primary navigation just off screen is becoming a
ubiquitous pattern in responsive web design. More and more sites feature
a fixed-position icon that, when tapped, pushes the entire site to the
side to reveal a hidden navigation menu.
While there are plenty of jQuery plugins that will create this effect
for you, it’s actually pretty easy to achieve without using any
JavaScript at all.
This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS.
Before we get started, I’d like to make a note that using this method
for creating the drawer menu means your site’s navigation will always
be in a drawer, regardless of viewport size. If you only want the drawer
menu on smaller screens, you’ll have to use some JavaScript to
manipulate the DOM order or use some funky CSS to make the menu look
right on larger screens. In other words: It’s pretty and simple, but
it’s not always the right solution for every situation.
0 komentar:
Posting Komentar