DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Fixed Table of Contents Design | Fixed TOC Design
Stackfindover
Stackfindover

Posted on

Fixed Table of Contents Design | Fixed TOC Design

Hello guys, today I am going to show you how to awesome fixed table of contents Using Html CSS & JavaScript

Table of Contents Design Step By Step

Step 1 β€” Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating a simple table of contents. In the next step, you will start creating the structure of the webpage.

Step 2 β€” Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Table of Contents Design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;400&display=swap" rel="stylesheet">
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:

<div id="fix_toc" class="fix_toc hide">    
        <div class="widget widget_toc">
            <h2 class="widgettitle">Table of Contents <span class="toggle"></span></h2>
            <ul>
                <li class="item-h2"><a href="#1-what-is-bookmarking"> What is Bookmarking?</a></li>
                <li class="item-h2"><a href="#2-what-is-social-bookmarking">What is Social Bookmarking?</a></li>
                <li class="item-h2"><a href="#3-what-is-the-purpose-of-social-bookmarking">What is the purpose of social bookmarking? </a></li>
                <li class="item-h2"><a href="#4-what-is-social-bookmarking-websites">What is Social bookmarking websites? </a></li>
                <li class="item-h3"><a href="#5-what-is-benefits-of-social-bookmarking">What is Benefits of Social Bookmarking? </a></li>
                <li class="item-h3"><a href="#6-what-is-disadvantages-of-social-bookmarking">What is Disadvantages of Social Bookmarking?</a></li>
                <li class="item-h4"><a href="#6-what-is-disadvantages-of-social-bookmarking">What is Disadvantages of Social Bookmarking?</a></li>
                <li class="item-h2"><a href="#7-how-does-social-bookmarking-work">How does social bookmarking work?</a></li>
                <li class="item-h2"><a href="#8-how-to-do-social-bookmarking">How to Do Social Bookmarking?</a></li>
                <li class="item-h2"><a href="#9-top-20-social-sharing-sites-2021">Top 20 Social Sharing Sites 2021</a></li>
                <li class="item-h2"><a href="#10-related-qa-about-social-bookmarking"> Related Q&amp;A About Social Bookmarking</a></li>
            </ul>
        </div>  
    </div>
    <button class="toc_toggle" onclick="toggleToc()"><img src="toc-icon.jpg" alt="toc icon"></button>
<script>
        function toggleToc() {
            var fix_toc = document.getElementById("fix_toc");
            fix_toc.classList.toggle("hide");
        }
    </script>
Enter fullscreen mode Exit fullscreen mode

Step 3 β€” Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
  padding: 0;
  margin: 0;
  text-decoration: unset;
  list-style: none;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #141414;
}
a:hover {
  color: #6c63fe;
}
h2.widgettitle {
  margin-bottom: 10px;
  font-size: 20px;
  color: #192b80;
}
button.toc_toggle {
  padding: 0;
  background: transparent;
  max-width: 40px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 999999;
  border: unset;
  cursor: pointer;
}
button.toc_toggle img{
  width: 100%;
}
div#fix_toc.hide {
  display: none;
}
.fix_toc {
  position: fixed;
  left: 10px;
  bottom: 70px;
  padding: 15px;
  background: #f2f4f6;
  z-index: 999999;
  max-width: 280px;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
  max-height: 70vh;
  overflow-y: auto;
}
.fix_toc .widget ul li {
  font-size: 14px;
  line-height: 24px;
  padding: 5px 10px;
  background: #fff;
  margin-bottom: 5px;
  border-radius: 3px;
}
.fix_toc .widget ul li a {
  display: block;
}
.fix_toc .widget ul li.item-h3 {
  margin-left: 10px;
}
.fix_toc .widget ul li.item-h4 {
  margin-left: 20px;
}
div#fix_toc::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
  background-color: #6c63fe;
}

div#fix_toc::-webkit-scrollbar {
  width: 5px;
  background-color: #ffffff;
}
Enter fullscreen mode Exit fullscreen mode

#Final Result

Live demo

Oldest comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post