added table of contents to attack data and tools page

mitre-attack · Feb 26, 2024 · 675e721 · 675e721
1 parent 068530a
commit 675e721
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/attack-theme/static/style/_layouts.scss b/attack-theme/static/style/_layouts.scss
@@ -1418,6 +1418,11 @@ div#sidebars {
             }
         }
     }
+    .table-of-contents {
+        position: static;
+        float: none;
+        width: 25%;
+    }
 }
 
 .tip-box {

diff --git a/modules/resources/templates/attack-data-and-tools.html b/modules/resources/templates/attack-data-and-tools.html
@@ -20,9 +20,28 @@
 <div class="container-fluid pb-3">
     <div class="working-with-attack">
         <h1>ATT&amp;CK Data & Tools</h1>
+        <div class="card card-filter jump-to-section table-of-contents">
+            <div class="card-body">
+                Jump to Section
+                <ul>
+                    <li>
+                        <a href="#tools-to-use">Tools to Use with ATT&amp;CK</a>
+                    </li>
+                    <li>
+                        <a href="#access-attack">Accessing ATT&amp;CK Data</a>
+                    </li>
+                    <li>
+                        <a href="#excel-attack">ATT&amp;CK in Excel</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
 
         <!-- tools -->
         <div class="my-5">
+            <div class="anchor" id="tools-to-use">
+                <p></p>
+            </div>
             <h2>Tools to Use with ATT&amp;CK</h2>
             <p>
                 The following tools allow users to explore, access, visualize, and query ATT&amp;CK in different ways.
@@ -111,6 +130,9 @@ <h3>Python Utilities</h3>
 
         <!-- accessing attack data -->
         <div class="my-5">
+            <div class="anchor" id="access-attack">
+                <p></p>
+            </div>
             <h2>Accessing ATT&amp;CK Data</h2>
 
             <!-- stix -->
@@ -225,6 +247,9 @@ <h3>TAXII</h3>
             </div>
 
             <!-- excel -->
+            <div class="anchor" id="excel-attack">
+                <p></p>
+            </div>
             <h3 class="mt-5">ATT&amp;CK in Excel</h3>
             <div class="row">
                 <div class="col-sm-8">