jQuery Tocible - A Table Of Contents navigation

jQuery Tocible is a Table Of Contents navigation plugin that's lightweight, easy to integrate and works well on responsive design.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: markserbol.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="jquery.tocible.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.tocible.js"></script>

2. HTML

<div id="contents">
      
      <div class="ref">
      <!-- 
        This element will be the reference 
        for the navigation list positioning, 
        especially on RWD, so position well 
        to your liking. 
      -->
      </div>
  
      <article>
          <h2>Heading</h2>
          <p>...</p>
          <h3>SubHeading</h3>
          <p>...</p>	
      </article>
      
</div>

3. JAVASCRIPT

$('#contents').tocible();

4. OPTIONS

$('#contents').tocible({
  
      heading: 'h2', 
      	//[selector], the first level heading
        
      subheading: 'h3', 
      	//[selector], the second level heading
        
      reference: '.ref', 
      	//[selector], reference element for  
        //horizontal positioning.
        //The menu will reflect how this element 
        //is positioned horizontally especially 
        //on a responsive designed website.
        
      title: 'Contents', 
      	//[selector or string], title of the menu
        
      hash: false,
      	//[boolean], setting true will enable 
        //URL hashing on click.
        //The heading 'id' will define the hash value,
        //for example <h2 id="definition"></h2>
        //will change the URL to 
        //www.website.com/#definition
        
      offsetTop: 50, 
      	//[number], spacing/margin above the menu
        
      speed: 800, 
      	//[number or string ('slow' & 'fast')], 
        //duration of the animation when 
        //jumping to the clicked content
        
      collapsible: true 
      	//[boolean], enabling true will auto collapse 
        //sub level heading not being scrolled into
      
      maxWidth: 150 
      	//[number], set max-width of the menu
        
});