Submit your widget

jQuery Code a Single-Page Sliding Website Layout With Fixed Navigation

Created 3 years ago   Views 6544   downloads 1276    Author designshack
jQuery Code a Single-Page Sliding Website Layout With Fixed Navigation
View DemoDownload 661.5 KB
28
Share |

In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making

Getting Started

First I’ve downloaded a local copy of jQuery to keep with the other script files. Also we need a copy of the jQuery.scrollTo plugin which is a single .js file. I have created two alternate files index.html and styles.css for the page structure. We can break down the main contents first.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Single Page Sliding Layout - Design Shack Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
</head>

The heading contents should be straightforward with nothing overly complicated. The index file uses an HTML5 doctype along with the stylesheet and the two JS files we downloaded. Obviously there are alternatives for customizing the scroll effect, but in this situation it is much easier to implement a plugin. Inside the page HTML we can see how the navigation is setup.

  <div id="w">
    <div id="content">
      <nav id="stickynav">
        <ul id="nav" class="clearfix">
          <li><a href="#topbar">Homepage</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#photos">Photos</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

All of the page is contained inside a wrapper using the ID #w. Another div #content marks the inner content on the page. This fixed navigation is kept within the page content for my demo, but you could theoretically move this anywhere else that fits nicely. Since it will be fixed you can always have the menu scrolling right along with the user no matter what placement.

The container #stickynav is used to keep all of the internal elements on top of the page content. I am using the CSS z-index property along with internal floats on all the list items. Notice the HREF values all point towards a hash sign located somewhere else on the page. We can use this value to determine where our slider should go.

Read more:http://designshack.net/articles/navigation/single-page-sliding-website-layout-fixed-nav/

Tag: navigation