How To Create A CSS Slide Out Fixed Navigation

Share this post!

Vote this!

In this article, 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.

More...