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 design. 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>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&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>
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;
}#Final Result
If you want source code you can download it from the below button
You may like these also:
We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.