Create a Smooth Jump-To Sub Navigation Menu in One JS Call

October 17, 2013 in Tutorials by Pete R.

Sometimes, the message the writer wants to convey to his/her audience can’t be expressed in short paragraphs. Long and rich content is the way to go but this can be intimidating for the readers as well. On the internet, everyone is competing for attention and long content may turn some of your audience off.

To help reduce this, I’ve decided to create a plugin that lets you add a Jump To sub navigation menu with one JS call. The readers will be able to use this to jump to data they are interested in right from the start. Want to know how I did this? Without further ado, let’s begin diving into the plugin features.

Note: This plugin has been tested in Chrome, Firefox, Safari and IE10.

Create a Smooth Jump-To Sub Navigation Menu in One JS Call

[tut demo=”https://onextrapixel.com/examples/smooth-jump-to-sub-navigation-menu-in-one-js-call/” download=”https://onextrapixel.com/examples/smooth-jump-to-sub-navigation-menu-in-one-js-call/smooth-jump-to-sub-navigation-menu-in-one-js-call.zip”]

Jump-To Sub Navigation Menu Tutorial

How does this work?

The sole purpose of this plugin is to create a super easy plugin that will let you integrate with your existing content without any hassle. What the plugin will do is it will detect the structure of your HTML, search through all the content for headers and generate the menu on the fly. As the user scrolls, the plugin will automatically position the menu to be fixed, and determine which content the user is currently viewing and reflect that in the sub navigation menu.

Demo 1

How-Tos

As with all of my jQuery plugins, you must include: the latest jQuery plugin available here, jquery.jumpto.js and immersive-slider.css found here into your document’s <head>. Once everything is set, please follow the HTML markup structure as shown below to help the plugin organize its thought before generating the menu :).

HTML

<div class="page_container">
  <div class="jumpto-block">
    <h2>Header 1</h2>
    <h3>SubHeader 1</h3>
    ....
    <h3>SubHeader 2</h3>
    ....
  </div>
  <div class="jumpto-block">  
    <h2>Header 2</h2>
    <h3>SubHeader 1</h3>
    ...
  </div>
</div>

The structure shown above has a container that wraps everything (page_container) for the function to be called on. Each section needs to be wrapped as well with a div, in this case it’s the jumpto-block div, to let the plugin know how to group each headers and its sub headers correctly. The <h2> tag will be the first level header, and the <h3> that follows will be the sub headers inside the first level header.

Once that is done, simply call the JS function as follows:

JS:

$(".page_container").jumpto({
  firstLevel: "> h2",
  secondLevel: false,
  innerWrapper: ".jumpto-block",
  offset: 400,
  animate: 1000,
  navContainer: false,
  anchorTopPadding: 20,
  showTitle: "Jump To",
  closeButton: true
});

With the current setup, the sub navigation menu will be generated on the fly with all the h2 tags inside ".jumpto-block" set as the first level navigation. The menu will be fix-positioned when the user scrolls below 400 pixels from the top and each link, once clicked, will smoothly move to that section in 1000 milliseconds.

To customize this, all you need to do is to change the following options as you see fit:

firstLevel: This option lets you define the selector for your first level navigation. The default value is “> h2” which will make every h2 that is directly under the container the first level navigation.
secondLevel: This plugin also supports sub menu as well. Same as the firstLevel option, this one will let you set the selector for your second level navigation. For example, set it to “> h3” if you want all h3 inside the container to be the second level navigation. The default value is false.
innerWrapper: Define custom selector here in case you want to change the section container. The default value is .jumpto-block.
offset: You can define how many pixels until the navigation menu starts to follow you on scroll. Default is 400 pixels.
animate: This option lets you define how fast/slow the page will scroll when the sub navigation menu is clicked. Set to false to turn off animation.
navContainer: In case you want to manually place the sub navigation menu somewhere else (Demo 3), simply place your menu container in the HTML and define the selector here. Default value is false, which will generate the menu on the fly.
anchorTopPadding: This option lets you set the top padding when the jump to menu is clicked. This will let you control the space between your header and the top of the page. Default is 20 pixels.
showTitle: You can define the title of the navigation menu here. Default value is “Jump To”. Change this to false if you want to hide it.
closeButton: You can either show or hide the close button at the bottom of the navigation menu. The default value is true. Set this to false if you want to hide it.

Demo 3

Conclusion

And that’s all the options available. Since the plugin also comes with a CSS file, you can change the current styles by simply changing values inside the jumpto.css to anything you want. You can see how I switched from the side menu to top menu with a few lines of CSS changes.

I hope you enjoy this week’s tutorial. Once again, if you have anything to share, or have questions, suggestions, feel free to let us know in the comments below.