{"authorId":"1","title":"jQuery One Page Navigation Plugin","slug":"jquery-one-page-navigation-plugin","postDate":1285533314,"expiryDate":null,"enabled":"1","fields":{"2":"<p>When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: <a href=\"http:\/\/www.brizk.com\/\">Brizk Design<\/a> and <a href=\"http:\/\/crushlovely.com\/\">Crush + Lovely<\/a>. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted.<\/p>\n\n<p>I wanted the page to scroll smoothly when the navigation was clicked, so I used the <a href=\"http:\/\/flesler.blogspot.com\/2007\/10\/jqueryscrollto.html\">jQuery ScrollTo plugin<\/a>. I also wanted the page to automatically highlight the correct navigation section depending upon which section was scrolled to, and that was where I added my custom code.<\/p>\n\n<p>If you want to skip ahead, you can <a href=\"http:\/\/trevordavis.net\/play\/jquery-one-page-nav\/\">check out the demo<\/a> and <a href=\"http:\/\/github.com\/davist11\/jQuery-One-Page-Nav\">download the plugin from GitHub<\/a>.<\/p>\n\n<h2>The Markup<\/h2>\n<p>I started with an unordered list for the navigation and a bunch of sections:<\/p>\n<pre><code>&lt;ul id=\"nav\">\n  &lt;li class=\"current\">&lt;a href=\"#section-1\">Section 1&lt;\/a>&lt;\/li>\n  &lt;li>&lt;a href=\"#section-2\">Section 2&lt;\/a>&lt;\/li>\n  &lt;li\">&lt;a href=\"#section-3\">Section 3&lt;\/a>&lt;\/li>\n&lt;\/ul>\n\n&lt;div id=\"section-1\">\n  &lt;strong>Section 1&lt;\/strong>\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor\n  incididunt ut labore et dolore magna aliqua.&lt;\/p>\n&lt;\/div>\n&lt;div id=\"section-2\">\n  &lt;strong>Section 2&lt;\/strong>\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor \n  incididunt ut labore et dolore magna aliqua.&lt;\/p>\n&lt;\/div>\n&lt;div id=\"section-3\">\n  &lt;strong>Section 3&lt;\/strong>\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor \n  incididunt ut labore et dolore magna aliqua.&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n<h2>The JavaScript<\/h2>\n<p>Then, I added jQuery, the ScrollTo plugin, and my plugin to the page:<\/p>\n<pre><code>&lt;script src=\"jquery.js\">&lt;\/script>\n&lt;script src=\"jquery.scrollTo.js\">&lt;\/script>\n&lt;script src=\"jquery.nav.min.js\">&lt;\/script><\/code><\/pre>\n\n<p>Finally, I just need to call my plugin on the navigation:<\/p>\n<pre><code>$(document).ready(function() {\n  $('#nav').onePageNav();\n});<\/code><\/pre>\n\n<h3>Options<\/h3>\n<p>There are a few options for this plugin:<\/p>\n<ul>\n<li>\n<h4>currentClass: 'current'<\/h4>\nClass to add to the list item when the navigation item is selected\n<\/li>\n<li>\n<h4>changeHash: false<\/h4>\nIf you want the hash to change when the user clicks on the navigation, change this to <strong>true<\/strong>\n<\/li>\n<li>\n<h4>scrollSpeed: 750<\/h4>\nSpeed to scroll the page when the navigation is clicked\n<\/li>\n<\/ul>\n\n<p>And that&rsquo;s it. <a href=\"http:\/\/trevordavis.net\/play\/jquery-one-page-nav\/\">Check out the demo<\/a> and <a href=\"http:\/\/github.com\/davist11\/jQuery-One-Page-Nav\">download the plugin from GitHub<\/a>.<\/p>","14":{"old_id":{}}}}