Demo: Basic

Autogenerated

The most easyly way to generate a content index navigator. Just wrap all content inside a ".connav-auto-block" element (use autocontent option for changing default selector). Content Navigator will search inside ".connav-auto-block" container all headings (h2, h3, etc.). From this headings index navigator will be autogenerated. "#navigator" works like an empty canvas to the navigator. 


<script>

    $('#navigator1').contentNavigator();
    
</script>

<style>

.connav-level-2, .connav-level-3 {
    margin-left: 20px;
}

</style>

First title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Third subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Controlling markup

Sometimes you have to take controll over titles and contents. So, you just have to wrap each block of content and the, inside each of them, you have to include a title and neasted blocks. 


$('#navigator2').contentNavigator({
    title : '.title',
    content : '.content'
});
Hey, I'm a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

There is a subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Hey, I'm another title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Further information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Updating URL

URL can be updated when you scroll on page. If no id is found in each title, ids will be autogenerated in order to use them as URL hash.
Also, here we use wrapper option to determinate where plugin can search for bloks or content. 


$('#navigator3').contentNavigator({
    wrapper : '#demo3',
    autocontent : '.your-selector',
    updateURL : true
});

First title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Third subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.