I’m struggling with toc in my site these days because I ran into a triky problem Catalog in row expand into another row in Bootstrap grids.
Since I was not trained to write css, I couldn’t handle it myself. I turned to find some demoes explaining how to style toc in website, but I failed to. Instead, I found a lot of websites using different skills but implementing similar style.
It’s not difficult to find a way to generate a toc, but what is hard for me is to write a proper css which satisfies my demands. My demands are quite common:
- Auto word wrap on long items
- Highlight current header
- Don’t folder children items
- Center the current header if possible
- Easy control on toc place (hover right or hover left)
- Only exsist in main article
These demands except the last one can be satisfied using solution offered by https://discuss.asciidoctor.org/Is-there-a-way-to-autoscroll-the-toc-from-the-content-in-HTML-tp4525p7339.html, but it is a Asciidoc way, it has it’s own css style which is hard for me to figure out.
The only problem with Asciidoc toc is that it expands into the whole screen rather than only keeps with main article. Minimal Mistakes’s post Layout: Post with Sticky Table of Contents does that very well.
What disturbs me most is that there are lots of plugins to generate toc but I fail to find any tutorials teaching you how to style a toc.
Therefore, I wonder is there any tutorial to style toc under my demands with as few css files as possbile?