Snippets/Floating Table of Contents
 | |
|---|---|
| Language(s): | CSS |
| Compatible with: | unknown |
You can add the following to your stylesheets in order to get the Table of Contents box to show up floating above the content, and fixed on the right hand side of the page.
This has the advantage of allowing the TOC always be present (though still hideable), giving a bird's eye view of the page's content and quick access to its sections from wherever one has scrolled in the page. It also allows users to see the page's contents more quickly if they are beneath a TOC. (Similar functionality is available by using browser add-ons such as HeadingsMap (Firefox or Chrome) or HTML5 Outliner (Chrome) which can work on any site that uses headings (such as Mediawiki-driven sites), but this requires users to install an add-on.)
There should be enough space between the top and bottom so that the user can still navigate the header or footer links. It also takes into account overflow, adding internal scrollbars to the TOC when the content is too large to fit.
It gives a small degree of translucency so the user can know when there is text or other content behind the TOC, but not too much translucency so as to cause clashing with the TOC text.
#toc {
position: fixed;
right: 0;
top: 7em; /* 5em is height of header, 6em brings just under */
/* bottom: 5em; /* 5em puts us above the footer; not bad but too low when TOC is collapsed */
z-index: 10000; /* Ensure we float above the header, etc. */
/* Add opacity (translucency) */
background-color: rgb(249, 249, 249);
background-color: rgba(249, 249, 249, 0.9); /* Higher opacity (last arg) means less transparency */
}
/* Ensure the TOC height doesn't take over the screen; percentages may be higher than view port, so we use pixels */
#toc > ul {
max-height: 350px;
overflow: auto;
}
.toctoggle {
float: right;
}