Design Lunatic – Create a Jquery “Slidebar”

Create a Jquery “Slidebar”

Sep 21, 2011 | In jQuery, Tutorials | By: Design Lunatic

Today, we’ll go over how to create an interesting navigation section that slides into the page when a link is clicked on. We’ll use HTML(surprisingly enough), Jquery, and a bit of CSS3 to spice things up.

View The Demo

Download Files

HTML

First off, we need to create a solid HTML base for today’s tutorial. We’ll actually use HTML5 this time, which I discussed in this post.

<aside id="slidebar">

	<a href="#" id="slidebar_link">Navigation</a>

	<a href="http://www.designlunatic.com/">
	<div id="logo">
		<div id="logo_text">DL</div>
	</div>
	</a>

	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Categories</a></li>
			<li><a href="#">Archives</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</nav>
</aside>

The “slidebar” aside element is what will slide in from outside the page. Now, here’s what’s inside:

A link that will either show or hide the slidebar, depending on the current state.
The Design Lunatic logo, just because it looks so great.
Some navigation links.

Simple, right? Of course! So, now we can move on to the second part of the html: the posts section.

<div id="posts">
<article>
<h2>Lorem Ipsum</h2>
<p>
Amet ultricies a ut? Proin! Ut arcu mattis nunc ut, sit? Massa, scelerisque cursus mattis facilisis phasellus placerat. In risus egestas nec penatibus non placerat, vut, mauris? Et, amet diam. Phasellus natoque nunc, enim augue, egestas, odio ut, lacus sed augue, odio quis dis turpis. Massa, magna! Aliquet diam! Porta, in et tortor lectus? Et dignissim amet lundium. Velit mauris proin velit pid hac placerat rhoncus? Proin porta? Scelerisque facilisis? Magna in cras magna pellentesque augue augue nisi pulvinar, eu, ac elementum dolor pulvinar. Velit et purus pellentesque montes mus? Vut mus diam! Nisi tincidunt? Velit! Et sagittis, porta facilisis eu ac nisi ut, pid? Porttitor urna. Mid? Platea sed, dignissim pellentesque, elit scelerisque? Nisi dignissim, eros? Est porttitor integer.

Sed dictumst natoque habitasse enim sagittis natoque scelerisque rhoncus porttitor mauris! Purus ut mid augue aliquet duis. Egestas tristique, mid rhoncus pid, tincidunt. Elementum in sed nascetur nec nascetur, sed diam, dolor et sed turpis? In egestas mid dapibus dolor mauris. Scelerisque habitasse nunc lorem placerat augue scelerisque etiam nisi, odio in purus mattis placerat platea, diam massa turpis, elementum urna! Mid, nisi? Turpis? Cursus, enim vut lacus dolor eu enim! Eros aliquam nec integer dictumst ut! Sed proin cursus mattis placerat vel augue! Tincidunt lundium urna, in integer, in, et, rhoncus diam et platea nunc cursus porta et sed elementum nascetur rhoncus magna porttitor magnis nascetur nec porta nunc, pellentesque! Mauris ultricies. Nisi, cursus ultrices tincidunt porta augue.
</p>
</article>

<article>
<h2>Lorem Ipsum</h2>
<p>
Amet ultricies a ut? Proin! Ut arcu mattis nunc ut, sit? Massa, scelerisque cursus mattis facilisis phasellus placerat. In risus egestas nec penatibus non placerat, vut, mauris? Et, amet diam. Phasellus natoque nunc, enim augue, egestas, odio ut, lacus sed augue, odio quis dis turpis. Massa, magna! Aliquet diam! Porta, in et tortor lectus? Et dignissim amet lundium. Velit mauris proin velit pid hac placerat rhoncus? Proin porta? Scelerisque facilisis? Magna in cras magna pellentesque augue augue nisi pulvinar, eu, ac elementum dolor pulvinar. Velit et purus pellentesque montes mus? Vut mus diam! Nisi tincidunt? Velit! Et sagittis, porta facilisis eu ac nisi ut, pid? Porttitor urna. Mid? Platea sed, dignissim pellentesque, elit scelerisque? Nisi dignissim, eros? Est porttitor integer.

There’s a “posts” div with article element inside it. There’s an “h2″ and a “p” inside each article. These are the sample posts, which contain some simple lorem ipsum.

That’s it for the HTML. Let’s move on to the styling.

CSS

Before we do anything else, grab a copy of Eric Meyer’s CSS reset. Now, we can move on to our own styling.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
overflow-x: hidden;
}

Just some simple styling. Arial, a light grey background, and overflow-x hidden. We need the overflow to be hidden because the “slidebar” will be outside of the visible page. We don’t want users to be able to scroll to it.

#slidebar {
position: fixed;
width: 350px;
margin-left: -350px;
height: 100%;
background: #565656;
}

The slidebar is 350px wide, is outside of the visible page because of its negative margin, and has a height of 100% so that it always takes up the browser viewport height.

#slidebar {
position: fixed;
width: 350px;
margin-left: -350px;
height: 100%;
background: #565656;
}

#slidebar nav {
margin-top: 30px;
}

#slidebar nav ul li a {
text-decoration: none;
color: #f8f8f8;
display: block;
width:300px;
height: 40px;

margin:0 auto;
margin-top: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;

-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
transition: all 100ms linear;

line-height: 40px;
text-align: center;
font-size: 18px;
}

#slidebar nav ul li a:hover {
background: #363636;
}

#slidebar nav ul li a:active {
background: #262626;
}

Yes, a lot of navigaion styling. The plus side to this is that it ends up looking amazing. Nothing too complicated here; just some text color styling, background colors, and CSS3 border radius and transitions.

#logo {
cursor: pointer;
text-align: center;
background: #3f3f3f;
height: 144px;
width: 144px;
margin: 0 auto;
margin-top: 30px;
-webkit-border-radius: 72px;
-moz-border-radius: 72px;
border-radius: 72px;

-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}

#logo:hover {
background: #313131;
}

#logo:active {
background: #212121;
}

#logo_text {
line-height: 76px;
color: #f8f8f8;
font-family: 'BebasNeueRegular';
font-size: 76px;
height: 76px;
padding-top: 34px;
}

You’ll notice we used the font “Bebas Neue” for the Design Lunatic logo. Most of you probably have it, but for those of you who don’t: here it is. Also, since we can’t guarantee that all our users will have the font installed, use Font Squirrel’s font face generator.

Now that we have that out of the way, let’s move on to the posts styling.

#posts {
margin-left: 150px;
float: left;
width: 650px;
}

#posts h2 {
margin-top: 20px;
margin-bottom: 15px;
font-size: 34px;
}

Super simple. The posts have a margin-left of 150 to accomodate for the link that will toggle the slidebar, which is styled this way:

#slidebar_link {
color: #363636;
font-size: 18px;
text-align: center;
float: right;
width: 100px;
margin-right: -125px;
}

It has a negative margin-right so that it stays outside the “slidebar”.

Jquery

Now, we’ll write the jquery that will power the whole thing.

$(document).ready(function(){
	
	var visible = false;
	
		$('#slidebar_link').click(function(){
		
		});	
		
	});

We’ve got the skeleton of a basic click function. Now, notice the “visible” variable. The value of this variable states the current state of the slidebar. If the slidebar is visible, “visible” is true. If the slidebar is outside of the page, “visible” is false. We’ll change the value of this variable everytime the state of the slidebar is changed.

$(document).ready(function(){
	
	var visible = false;
	
		$('#slidebar_link').click(function(){
		
			if(visible==false){
			
				visible = true;
				
			}
			
			else if(visible==true){
			
				visible = false;
			
			}
			
			return false;
		});	
		
	});

If it’s true, set it to false. If it’s false, set it to true. Simple. There’s also a “return false” at the end of the click function, so that the browser doesn’t actually follow the link.

$(document).ready(function(){
	
	var visible = false;
	
		$('#slidebar_link').click(function(){
		
			if(visible==false){
			
			visible = true;
			
				$('#slidebar').animate({
					marginLeft: 0,
				});
			
				$('#posts').animate({
					marginLeft: 500,
				});
				
			}
			
			else if(visible==true){
			
			visible = false;
			
				$('#slidebar').animate({
					marginLeft: -350,
				});
			
				$('#posts').animate({
					marginLeft: 150,
				});
			
			}
			
			return false;
		});	
		
	});

That’s all the code in one place. If the “visible” is false, animate the slidebar in. We also have to animate the posts, so that they aren’t under the slidebar. If “visible” is true, then move the slidebar back outside the page. Simple.

Well, that’s the end of this tutorial. I hope you enjoyed it, and have fun animating “slidebars”!