How To Create A CSS Slide Out Fixed Navigation

In today's tutorial we are going to learn how we can make it easy for your visitors to always have access to the main links on your site by creating a fixed position main navigation. But what we are going to do is hide half of the navigation off the page so it will not move over your content. Here is the end result of the tutorial, navigation positioned on the left side of the page.

#The HTML

First we are going to start by creating the HTML for the navigation for this we are going to use a HTML list with each list item being a navigation item.

<ul class="nav">
	<li><a href="#home">
		<img src="./images/home.png" />
	</a></li>
	<li><a href="#about">
		<img src="./images/about.png" />
	</a></li>
	<li><a href="#portfolio">
		<img src="./images/portfolio.png" />
	</a></li>
	<li><a href="#blog">
		<img src="./images/blog.png" />
	</a></li>
	<li><a href="#services">
		<img src="./images/services.png" />
	</a></li>
	<li><a href="#contact">
		<img src="./images/contact.png" />
	</a></li>
</ul>

Each of the list items has a link and inside the link is a image. As the example is a one age site all the link will go to internal locations on page by linking to the ID tag.

#The CSS

The important part of this tutorial is the CSS as this will take care of the fixed position and the style of the navigation item. First we start off by creating the fixed position navigation bar for this we need to style the list with class nav.

ul.nav{
	list-style:none;
	padding:0;
	margin:0;
	position:fixed;
	left:-30px;
	top:140px;
}

The above CSS makes sure that we do not display the list bullet points and will fix the whole navigation to the left side of the page 140 pixels from the top of the page. As you can see we are positioning the navigation -30 pixels off the page which moves half of the navigation button off the page, this makes sure that the navigation will not cover up the contents of the page. Later in the tutorial we will learn of a nice way of displaying the navigation item by using CSS transition. Next we create each of the list items for the navigation, in the HTML we already have the images so now all we have to do is style the boxes.

li{
	height:50px;
	width:50px;
	background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
padding:10px;
position:relative;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

The important thing to notice in the above CSS is to add the position: relative to the list items. This is so we can change the position of the list item when we hover over the image. Now we have created the list item we can now add the CSS needed to slide the image out when you hover over the menu items, for this we use the below CSS.

li:hover {
    left:30px;
    transition: left 0.3s linear;
    -webkit-transition: left 0.3s linear;
    -moz-transition: left 0.3s linear;
}

This will change the position of the menu item 30 pixels to the right, the important part of this is the transition property. This is what we use to make the menu item slide out instead of just moving the menu item. The transition property allows you to add effects to your page without the use of javascript. It requires three parameters the first is the CSS property to add the effect to, the second parameter is the duration of the effect and the third parameter is the timing function to use, in this example we are using linear which makes sure the effect will be processed the same speed from start to finish.