How to create a hidden slide navigation in these 4 easy steps

Along with the rest of the web world I’ve been noticing a trend emerging on websites. The trend of having a hidden navigation which slides to reveal it self, pushing the content out of the way. The ‘hide-slide’ like many recent design trends started its days in crazy world of app UI and has quickly trickled down into web design. So how can you achieve such an effect?

I have used the following technique on a couple of recent sites successfully. If you want some ideas on designing this bad boy check out the Flat side Menu, free PSD download

2) The CSS
As you can see the structure is relatively simple. How this works is by positioning both the main_nav and the main_content absolutely and when the menu_toggle is pressed the main_content simply shifts over, giving its self a negative margin, to show your menu.

To trigger the function when the menu toggle is pressed simply call it on click.

1

$('.toggle_nav').on('click',function() {showNav()});

The Polish
Groovy, so now we should have the main_nav showing and hiding when the toggle_menu is pressed. But its instant and not very sexy. To achieve the desired results an have a smooth, elegant reveal simply add a CSS3 transition effect to animate the main_content when it moves over. To achieve this simply add the following lines of css to the main_content class.