A jQuery plugin to build a sticky navigation from the content of an article.
Check out the homepage to see it in action or this demo to get an idea of how it all works.
Start by importing the script to your page, the best location is in the footer, but no matter what make sure it follows your jquery file.
<script src=“jquery.sectionNav.min.js”></script>Include a class or id hook in the element you want to apply the plugin to and include an <h3> for each section you want to inlcude in the navigation.
<div class=“main”>
<article class=“post-article”>
<h1 class=“post-heading”>This is the main heading for the article</h1>
<h2 class=“post-sub-headling”>This is a sub-heading for the article</h2>
<p>Yada yada yada...</p>
<h3>This is a section heading</h3>
<p>More yada yada...</p>
<h3>Another section heading</h3>
<p>More more yada...</p>
</article>
</div>Now initialise the plugin with your hook for the article
$(‘.post-article’).sectionNav();
and the plugin scans the article, grabs all the <h3>s, adds them to the navigation list and inserts the list before the article. It’s that easy...well almost.
To keep the plugin simple there are no styles added to the navigation, that’s all up to you. The nav structure looks like this and includes class names in @csswizardry’s inuit.css framework style:
<nav class=“section-nav”>
<span class=“section-nav-heading”>
<ol class=“section-list”>
<li class=“section-list-item”>
<a class=“section-link”>There are also loaded and loading hooks added to the body element (similar to how Typekit handles font loading) to allow for css transitions or any other changes in css you’d need.
<body class=“sn-loading”>turns into
<body class=“sn-active”>There are a few customizable options in sectionNav besides the element you apply it to using key: value pairs. Here are the defaults.
$(‘.post-article’).sectionNav({
sections: ‘h3’,
titleText: ‘Jump To’,
fixedMargin: 40
});
As mentioned, the script automatically searches for <h3>s within the target article. If your page structure differs, feel free to target another element, like a <h2> or <h4> or even a class, like .section-headline.
sectionNav’s default title text is ‘Jump To’, but feel free to change it to whatever works for you, like ‘Article Sections’ or ‘Page Navigation’
This is the top dimension you set for the .section-nav.fixed class, which is applied as the user scrolls down the page and is removed as they scroll above the article. You definitely want to set this if you don’t use the default 40px, otherwise the nav will jump around as the user scrolls past the top of the article.
sectionNav is released under the CC Attribution-ShareAlike license. This means you can recreate, edit or share the plugin as long as you maintain the same open licensing.
With a bit of guidance from Eric Clemmons (@ericclemmons)