Responsive Ad Slot

How to Create a Table of Contents - TOC Section with css ?

Monday, January 24, 2022

/ by Admin
 
CSS Section:
<style>
body {
padding: 2em;
max-width: 600px;
margin: 0 auto;
}

.table_of_contents{float:left;padding:5px;margin:5px 10px 10px 0;background-color:#e6f4ea;font-weight:bold;width:50%;height:auto;}

.table_of_contents ol li{margin-left:18px}

.table_of_contents ol li:hover{margin-left:25px;transition:all 0.5s}

.table_of_contents span:after{content:'';display:inline-block;vertical-align:middle;height:0;width:0;margin:0 0 0 6px;border:4px solid transparent;border-top-color:#656565;}

.table_of_contents::-webkit-scrollbar{width:8px}

.table_of_contents::-webkit-scrollbar-thumb{border-radius:10px;background-color:#4f4f4f}
@media screen and (max-width:540px){
.table_of_contents{display:block;width:100%}
}
</style>

HTML Section:
<h1>Table Of Contents Widgets (T.O.C)</h1>
  <nav class="table_of_contents">
    <span>Table Of Content</span>
<ol>
  <li><a href="#section1">Toggle Section 1</a></li>
  <li><a href="#section2">Toggle Section 2</a></li>
  <li>Toggle <a href="#section3">Section 3</a></li>
  <li><a href="#more">Add More a Section</a></li>
  </ol>
</nav>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section1">This is section 1</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section2">This is section 2</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section3">This is section 3</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>



No comments

Post a Comment

Leave with comments

Don't Miss
© all rights reserved
made with by templateszoo