Customizable jQuery One Page Scroll Navigator - neo-pager
File Size: | 16.9 KB |
---|---|
Views Total: | 2971 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Neo Pager is a robust and customizable jQuery plugin for generating a side navigation for your one page scrolling website that allows the visitor to navigate through your sectioned content with mouse wheel or by clicking on the navigation bullets.
How to use it:
1. Include jQuery library and the jQuery neo pager plugin on your html page.
<script src=//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/path/to/neo.pager.js"></script>
2. The html structure to create web page sections as follow. To show hint on bullet you need to add the attribute: data-hint-text
<div id="container"> <div class="block1 height-block page" data-hint-text="Page 1"><h1>Page 1</h1></div> <div class="block2 height-block page" data-hint-text="Page 2"><h1>Page 2</h1></div> <div class="block3 height-block page" data-hint-text="Page 3"><h1>Page 3</h1></div> <div class="block4 height-block page" data-hint-text="Page 4"><h1>Page 4</h1></div> <div class="block5 height-block page" data-hint-text="Page 5"><h1>Page 5</h1></div> <div class="block6 height-block page" data-hint-text="Page 6"><h1>Page 6</h1></div> </div>
3. Initialize the plugin without all default options.
$("#container").neo_pager();
4. The plugin will automatically generate bullets for the navigation based on your page sections. You can override or modify the default CSS as shown below to create your own navigation styles.
#dot-holder { position: fixed; right: 30px; top: 100px; width: 30px; } #dot-holder .page-nav-dot { list-style-type: none; } #dot-holder .page-nav-dot span { display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: white; margin: 10px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.3); border: 1px solid silver; } #dot-holder .page-nav-dot span:hover { background: #00aeef; } #dot-holder .page-nav-dot span.page-nav-dot-current:after { content: ''; width: 8px; height: 8px; position: absolute; top: 1px; left: 1px; border-radius: 50%; background: #00aeef; background: -moz-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00aeef), color-stop(47%, #0095CC), color-stop(100%, #00aeef)); background: -webkit-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%); background: -o-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%); background: -ms-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%); background: linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeef', endColorstr='#00aeef', GradientType=0 ); } #dot-holder.page-nav-dot { margin: 5px 0px; } .hint--page:after { background-color: #0095CC; text-shadow: 0 -1px 0px #00aeef; text-transform: capitalize; } .hint--page.hint--top:before { border-top-color: #0095CC; text-transform: capitalize; } .hint--page.hint--bottom:before { border-bottom-color: #0095CC; text-transform: capitalize; } .hint--page.hint--left:before { border-left-color: #0095CC; text-transform: capitalize; } .hint--page.hint--right:before { border-right-color: #0095CC; text-transform: capitalize; }
5. All default options.
$("#demo").neo_pager({ // class selector for all pages pageClass: "page", // id of the dot holder parentDotId: "dot-holder", // current active dot activeDotClass: "page-nav-dot-current", // used to animate the dot hide dotOutAnimClass: "", // used to animate the dot show dotInAnimClass: "", // the main dot holder class, dotClass: "page-nav-dot", // doe's dot selection bar is visible dotSelectionVisible: true, // if no animate class is used dotAnimSpeed: 500, // if no animate class is used dotDelay: 100, // how we recognize the current page / 0.5 = half page, values from 0..1 pageFactorUp: 0.1, // how we recognize the current page pageFactorDown: 0.9, // if true it will auto scroll to next current page autoScrollPages: false, // animation of page scroll pageScrollSpeed: 1000, // callback events onDotHide: null, onDotShow: null, onPageIn: null, onPageOut: null, onScroll: null, onAutoScrollStart: null, onAutoScrollEnd: null, // if true, plugin css will be auto created useDefaultCss: false, // classes that describe hint side position, how hint will be shown, and hint style hintClass: "hint--left hint--rounded hint--page", // if true it will auto generate hint css classes and styles addHintStyle: true });
This awesome jQuery plugin is developed by KaktusFlame. For more Advanced Usages, please check the demo page or visit the official website.