jQuery Plugin For One Page Scroll Navigation - Menu Anchor
File Size: | 13.3 KB KB |
---|---|
Views Total: | 4421 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Menu Anchor is a jQuery plugin that automatically generates sticky anchor links which allow you to scroll smoothly through different sections on the vertical one-page scrolling website. Licensed under the Apache License.
How to use it:
1. Add a list of navigation items to the webpage.
<nav id="container" class="anchor-menu"> <h3>Navigation</h3> <ul> <li id="menu-anchor-section1"><a href="#">Section 1</a></li> <li id="menu-anchor-section2"><a href="#">Section 2</a></li> <li id="menu-anchor-section3"><a href="#">Section 3</a></li> </ul> </nav>
2. Add content sections with corresponding IDs to the webpage as displayed below.
<div id="menu-anchor-section1-content"> Section One </div> <div id="menu-anchor-section2-content"> Section Two </div> <div id="menu-anchor-section3-content"> Section Three </div>
3. Add jQuery JavaScript library and the jQuery Menu Anchor plugin to the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.menu-anchor.min.js"></script>
4. Initialize the plugin to generate a sticky navigation containing anchor links for your one page scrolling website.
$('#container').MenuAnchor();
5. Style the One Page Scroll Navigation whatever you like.
.anchor-menu { line-height: 1.5; margin: 150px auto; width: 300px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); background: #fff; z-index: 100; position: fixed; right: 0; } .anchor-menu h3 { color: #fff; font-size: 12px; font-weight: bold; margin: 0px; padding: 7px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.2); background: #a90329; /* Old browsers */ background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* IE10+ */ background: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);/* W3C */ } .anchor-menu ul { background: #fff; font-size: 12px; line-height: 30px; list-style-type: none; overflow: hidden; padding: 0px; margin: 0px; } .anchor-menu ul a { margin-left: 20px; text-decoration: none; color: #222; display: block; width: 300px; } .anchor-menu li { border-bottom: 1px solid #eee; cursor: pointer; } .anchor-menu li:hover { background: #eee; } .anchor-menu .selected { font-weight: bold; background: #ccc; }
6. Possible plugin options.
$('#container').MenuAnchor({ // The current document object window: window.top, // The prefix of navigations id will be use pluralId: 'menu-anchor-', // The postfix of contents id will be use contentPostfix: '-content', // update the current selected anchor scroll: true });
This awesome jQuery plugin is developed by maasdi. For more Advanced Usages, please check the demo page or visit the official website.