Published in Tutorials, Web Development
Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.
In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.
Live Demo