<HTML/CSS> Memo: Simple and Cool Expansible TOC Menu

Goal

To put an expansible, easily-accessible TOC menu using only HTML and CSS.

Code

index.html

<link href="./style.css" rel="stylesheet" />

<div id="toc">

    <details>
        <summary>Table of Contents</summary>
        <ul>
            <!-- TOC -->
        </ul>
    </details>

</div>

style.css

    :root{
        --display-max-width: 1200px;
    }
    
    *{
        box-sizing: border-box;
    }

    #toc{
        --toc-bg-color:#cccccc;
        --toc-detail-bg-color:#ffffff;
        position: fixed;
        bottom: 0px;
        left:0px;
        width: 100vw;
        padding: 0 5px 5px 5px;
        background-color: var(--toc-bg-color);
        height: calc(1em + 35px);
        overflow-y: auto;
        transition: height 0.5s;
    }
    
    #toc:has(details[open]){
         height:50vh;
    }
    
    #toc details{
        margin:0 auto;
        max-width: var(--display-max-width);
        background-color: var(--toc-detail-bg-color);
    }
    
    #toc details ul{
        margin-bottom:0px;
    }
    
    #toc details summary{
        box-sizing: border-box;
        position: sticky;
        padding-top:5px;
        top: 0px;
        background-color: var(--toc-bg-color);
        border: 5px solid var(--toc-bg-color);
}