jQuery Plugin For One Page Scroll Navigation Menu Anchor - Download jQuery Plugin For One Page Scroll Navigation - Menu Anchor

Download jQuery Plugin For One Page Scroll Navigation – Menu Anchor

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For One Page Scroll Navigation – Menu Anchor, hope it will help you in programming stack.

jQuery Plugin For One Page Scroll Navigation Menu Anchor - Download jQuery Plugin For One Page Scroll Navigation - Menu Anchor
File Size: 13.3 KB KB
Views Total: 3952
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <nav id="container" class="anchor-menu">
2   <h3><a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a></h3>
3   <ul>
4     <li id="menu-anchor-section1"><a href="#">Section 1</a></li>
5     <li id="menu-anchor-section2"><a href="#">Section 2</a></li>
6     <li id="menu-anchor-section3"><a href="#">Section 3</a></li>
7   </ul>
8 </nav>

2. Add content sections with corresponding IDs to the webpage as displayed below.

view source
01 <div id="menu-anchor-section1-content">
02   Section One
03 </div>
04  
05 <div id="menu-anchor-section2-content">
06   Section Two
07 </div>
08  
09 <div id="menu-anchor-section3-content">
10   Section Three
11 </div>

3. Add jQuery JavaScript library and the jQuery Menu Anchor plugin to the webpage.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <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.

view source
1 $('#container').MenuAnchor();

5. Style the One Page Scroll Navigation whatever you like.

view source
01 .anchor-menu {
02   line-height: 1.5;
03   margin: 150px auto;
04   width: 300px;
05   -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
06   -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
07   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
08   background: #fff;
09   z-index: 100;
10   position: fixed;
11   right: 0;
12 }
13  
14 .anchor-menu h3 {
15   color: #fff;
16   font-size: 12px;
17   font-weight: bold;
18   margin: 0px;
19   padding: 7px 12px;
20   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
21   border-top: 1px solid rgba(255, 255, 255, 0.2);
22   background: #a90329;
23   /* Old browsers */
24   background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
25   /* FF3.6+ */
26   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));
27   /* Chrome,Safari4+ */
28   background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
29   /* Chrome10+,Safari5.1+ */
30   background: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
31   /* Opera 11.10+ */
32   background: -ms-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
33   /* IE10+ */
34   background: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);/* W3C */
35 }
36  
37 .anchor-menu ul {
38   background: #fff;
39   font-size: 12px;
40   line-height: 30px;
41   list-style-type: none;
42   overflow: hidden;
43   padding: 0px;
44   margin: 0px;
45 }
46  
47 .anchor-menu ul a {
48   margin-left: 20px;
49   text-decoration: none;
50   color: #222;
51   display: block;
52   width: 300px;
53 }
54  
55 .anchor-menu li {
56   border-bottom: source : jqueryscript.net

Related posts: