CSS3 Android Like Menu

date_range  03 May 2014

jQuery
CSS3

If you’ve used any recent version of Android, or apps such as Facebook on iOs you would notice the menus are hidden off to the side of the screen and toggled via a button. The current iteration of this site is using this technique and I think it works quite well, as long as you have a modern browser.

First off, here’s a demo and the code. Look familiar? The styling is mostly provided by Bootstrap, but the functionality of the menu is provided by a few very specific bits of CSS3. There is a baby bit of jQuery to add and remove the out class when the button is toggled. There’s another special bit of jQuery for sliding the menu back in when anywhere else on the page is clicked.

The rest of the effect is on CSS3 transitions. The side bar menu itself is in a fixed position so that it can take up the entire height of the window without any fancy tricks. The button is relatively positioned just outside of the menu so its position is totally arbitrary. The menu itself is negatively positioned to the left by its width, and to bring it back onto the screen we just set the left position to 0.

The final step the effect is what happens to the page content; it gets shifted with the menu. It is assumed that the page content will be relatively positioned so to make it move we will have to set its margin attributes. So that we can animate them we need to explicitly set them for both ends of the animation. There is also a parallax effect by only sliding the content a partial distance compared to the width of the menu. If you don’t want this, just set the #wrap.out margins to be the same.

comments powered by Disqus

chevron_left Archive