Floating Table Of Contents In JavaScript – Ootliner

Category: Javascript , Menu & Navigation | April 18, 2023
Author:teesloane
Views Total:335 views
Official Page:Go to website
Last Update:April 18, 2023
License:MIT

Preview:

Floating Table Of Contents In JavaScript – Ootliner

Description:

Ootliner is a JavaScript TOC plugin that helps create a dynamic, floating, and hover-triggered table of contents component based on the heading elements you specify.

Perfect for documentation websites and long blog posts to improve the user experience when navigating through various sections and topics.

How to use it:

1. Install and import the Ootliner.

# NPM
$ npm i ootliner
import ootliner from 'ootliner'
<!-- OR -->
<script src="./lib/index.js"></script>

2. Initialize the Ootliner and specify the heading elements you want to use for generating the table of contents. Default: h1 ~h6.

ootliner({
  headings: "h2, h3, h4"
})

3. Set the position of the floating table of contents: left or right.

ootliner({
  headings: "h2, h3, h4",
  position: "left",
})

4. Customize the color of the anchor links.

ootliner({
  headings: "h2, h3, h4",
  position: "left",
  hoverColour: "red", 
  color: "#555",
})

You Might Be Interested In:


Leave a Reply