Free side nav psd

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

 

 

The Hide-Slide

Example

1) The HTML

Now for this effect to work properly you must structure the HTML in such a way as to hide the navigation, but allow the content to slide out of the way when you reveal the navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="main_nav">
<ul>
	<li>Home</li>
	<li>About</li>
	<li>Products</li>
	<li>Contact</li>
</ul>
</div>
<div class="main_content">
<div class="wrap"><span class="toggle_nav">
Menu
</span>
<!-- Page Content to go here --></div>
</div>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.main_nav {
position: absolute;
right:0px;
top:0px;
background: black;
width:20%;
height:100%;
z-index: 1;
}

.main_content {
position: absolute;
z-index: 2;
width:100%;
height:100%;
background: white;
}

.toggle_nav {
float: right;
margin-right: 40px;
cursor: pointer;
}

3) The jQuery
In order to keep this as simple as possible you use the following, very short, snippet of jQuery to simply add or remove a the class of ‘open’ to the main_content.

1
2
3
4
var showNav = function() {
var content = $('.main_content');
$(content).toggleClass('open');
}

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.

1
2
3
4
5
6
.main_content {
transition: margin 0.5s ease;
-moz-transition : margin 0.5s ease; /* Firefox Prefix */
-o-transition: margin 0.5s ease; /* Opera Prefix */
-webkit-transition: margin 0.5s ease; /* Chrome/Safari Prefix */
}

Voila! So there you have it, how to easily achieve the latest trend in web design. Let me know what you think and/or any examples of where you have used a similar technique.

Stay dedicated.

Rory K

Rory Kermack is a professional programmer, interactive designer, and entrepreneur. Working with the #iot, #hybridapps, #webrtc & #reactjs. Senior dev & main contributor of codeanthology.