Smart Top Navigation For Long Web Page - jQuery smartMenu

File Size: 9.79 KB
Views Total: 2380
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smart Top Navigation For Long Web Page - jQuery smartMenu

The jQuery smartMenu plugin automatically generates a smart, sticky top navigation for your long web page. The top navigation auto reveals on scroll down/up and auto hides when you reach the top of the webpage. Clicking the anchor links inside the top navigation will smoothly scroll between sectioned content within the document.

Scrollspy is supported as well that automatically highlights the current menu item as you scroll past their content sections. Can be used as a one page scroll navigation.

How to use it:

1. To use this plugin, load jQuery library and the jQuery smartMenu's files in the document.

<link rel="stylesheet" href="dist/smartMenu.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/smartMenu.js"></script>

2. Add the required attribute data-smart-menu to your content sections and specify the hashtag and section title in the following data attributes:

  • data-hash: hash tag 
  • data-title: section name to be displayed in the navigation
<h1 data-smart-menu 
    data-hash="section-title-1" 
    data-title="Title 1">
    Section 1
</h1>

<h1 data-smart-menu 
    data-hash="section-title-2" 
    data-title="Title 2">
    Section 2
</h1>

<h1 data-smart-menu 
    data-hash="section-title-3" 
    data-title="Title 3">
    Section 3
</h1>

...

3. Call the function to generate a top navigation for your sectioned content.

$(function () {
  $('[data-smart-menu]').smartMenu();
});

4. Set the element you want to prepend the top navigation to.

$('[data-smart-menu]').smartMenu({
  prependTo: $('body'),
});

5. Set the animation speed in milliseconds.

$('[data-smart-menu]').smartMenu({
  scrollSpeed: 800
});

6. Set the scroll offset in pixels.

$('[data-smart-menu]').smartMenu({
  offset: 80
});

7. Callback functions.

$('[data-smart-menu]').smartMenu({
  onScrollStart: function () {},
  onScrollEnd: function () {}
});

This awesome jQuery plugin is developed by grigno. For more Advanced Usages, please check the demo page or visit the official website.