make aside menu sticky

This commit is contained in:
Jonas Duri 2023-12-08 19:48:40 +01:00
parent c05f5dd642
commit 2923b48feb
2 changed files with 43 additions and 36 deletions

View File

@ -1,37 +1,39 @@
<aside id="menu">
<h2>Components</h2>
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Navigation">Navigation</a></li>
<li><a href="#NavigationList">Navigation List</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
<li>
<a href="#SpecialElements">Special Elements</a>
<ul>
<li><a href="#Blockquote">Blockquote</a></li>
<li><a href="#Misc">Misc</a></li>
</ul>
</li>
<li><a href="#Forms">Forms</a></li>
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Buttons">Buttons</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Timeline">Timeline</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Figure">Image with caption</a></li>
<li><a href="#highlightjs">Supports Highlight.js</a></li>
</ul>
</nav>
<div>
<aside id="menu">
<h2>Components</h2>
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Navigation">Navigation</a></li>
<li><a href="#NavigationList">Navigation List</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
<li>
<a href="#SpecialElements">Special Elements</a>
<ul>
<li><a href="#Blockquote">Blockquote</a></li>
<li><a href="#Misc">Misc</a></li>
</ul>
</li>
<li><a href="#Forms">Forms</a></li>
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Buttons">Buttons</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Timeline">Timeline</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Figure">Image with caption</a></li>
<li><a href="#highlightjs">Supports Highlight.js</a></li>
</ul>
</nav>
<h2>Documentation</h2>
<nav>
<ul>
<li><a href="#DocVariables">Variables</a></li>
<li><a href="#DocTypography">Typography</a></li>
</ul>
</nav>
</aside>
<h2>Documentation</h2>
<nav>
<ul>
<li><a href="#DocVariables">Variables</a></li>
<li><a href="#DocTypography">Typography</a></li>
</ul>
</nav>
</aside>
</div>

View File

@ -102,5 +102,10 @@
.components-grid {
grid-template-columns: 3fr 9fr;
}
.components-grid aside {
position: sticky;
top: calc(var(--global-space) * 2);
}
}
</style>