In this tutorial, we’re going to create some slide and push menus using CSS3 transitions. The menus will be hidden off screen at first, and will transition into view when the “toggle menu” button is pressed.
Get Source Code View the Demo
Let’s first define the difference in the two types of menus:
A slide menu will slide in above the content when toggled, and the content will stay in place.
A push menu will slide in and “push” the main content aside when toggled.
Before we proceed, there are some important things to note:
This tutorial relies on CSS transitions to work smoothly. On older browsers though, the content will just jump to the appropriate position.
I’m using classie.js for easily adding and removing classes.
I’m using the JavaScript functions querySelector and querySelectorAll which are supported from IE8 and up.
Finally, let’s take a look at the 8 varieties of menu we will create:
Slide left menu, which slides in from the left above the content
Slide right menu, which slides in from the right above the content
Slide top menu, which slides in from the top above the content
Slide in bottom menu, which slides in from the bottom above the content
Push left menu, which slides in from the left and pushes the content to the right
Push right menu, which slides in from the right and pushes the content to the left
Push top menu, which slides in from the top and pushes the content down
Push bottom menu, which slides in from the bottom and pushes the content up
When a menu is open, we’ll show a “mask” over the main wrapper. This is basically a semi-transparent overlay that hides the main content. When the user clicks the overlay, the menu will toggle back out of view. In each menu, there will also be a “close menu” button, which will help out when the menu takes up the full width of the screen on smaller screen sizes. Let’s first take a look at the general markup and CSS for all.
The HTML
The Common CSS
Understanding The Structure
Our body overflow-x is set to hidden, because we don’t want to have scrollbars on display when the wrapper is pushed to the left or right. When it’s pushed vertically, it doesn’t matter. More importantly though is positioning our off-screen navigation menus OUTSIDE the wrapper, because oddly enough, when a transform is applied to an element, it takes on a relative positioning temporarily. Since our navigation menus need to be fixed to the outer parts of the browser window, we don’t want it inside an element with relative positioning. Inside each menu, there’s a list of menu items, and a close menu button.
There’s ongoing discussion about the performance differences of absolute positioning/left/top versus transforms/translating. Paul Irish digs deep into this and you can read about it here. I’m using positioning in this case because we will have a non-transitioning fallback solution for older browsers, without having to use conditional stylesheets. Also, after testing both, the difference was totally unseeable to the human eye. Let’s take a look at version of our menu now.
1) Slide Menu Left
This menu slides in from the left over the content. Here’s the CSS for it:
2) Slide Menu Right
This menu slides in from the right above the content. Here’s the CSS for it:
3) Slide Menu Top
This menu slides in from the top above the content. Here’s the CSS:
4) Slide Menu Bottom
This menu slides in from the bottom above the content. Here’s the CSS:
5) Push Menu Left
This menu slides in from the left, and pushes the content to the right. A lot of the CSS is similar to the slide menu left, except we have to move the wrapper as well. Here’s the CSS:
6) Push Menu Right
This menu slides in from the right, and pushes the content to the left. A lot of the CSS is similar to the slide menu right, except we have to move the wrapper as well. Here’s the CSS:
7) Push Menu Top
This menu slides in from the top, and pushes the content downward. A lot of the CSS is similar to the slide menu top, except we have to move the wrapper as well. Here’s the CSS:
8) Push Menu Bottom
This menu slides in from the botomm, and pushes the content upward. A lot of the CSS is similar to the slide menu bottom, except we have to move the wrapper as well. Here’s the CSS:
The JavaScript
Now, let’s take a look at the JavaScript to toggle our classes when we hit the different menu buttons. We’ll also display our mask over the rest of the content, and implement some “close menu” functionality when the user clicks the mask or the close-menu button. Remember, I’m using classie.js to add and remove classes. My JavaScript, of course, is covering all eight menus. You might want to tailor your JavaScript and cut out the unnecessary stuff (unless you’re actually using 8 menus on your site…). Here’s the JavaScript:
Wrap Up
There it is! Some nice slide and push menus, ready to drop into your project. I included sample media queries in the source code, so feel free to download it or view the demos by clicking the links below.
Get Source Code View the Demo
The post Creating off screen menus that transition into view using CSS3 appeared first on Speckyboy Design Magazine.
The post Creating off screen menus that transition into view using CSS3 appeared first on Wanderlust Web Design Wordpress Studio.