Eclipsed Table of Contents
You can view all three components (CSS, HTML, Javascript) for this snippet together on Codepen, as well as see a live preview that you can edit on the fly...
You’ll notice on this (and most sites) that the (primary) navigation takes the form of a static menu area appearing in all the pages.
This works well if your site only has a few pages, but can make navigating tricky for visitors if your site is vast. How is it all supposed to fit? If you have a large site, consider also having a dedicated page for the entire table of contents (or site map, as one might call it).
You can, of course, do this with a normal (unordered, or even ordered) HTML list of links, but this actually complicates things in the long run. It’s a far better idea to plan ahead and organize your pages into categories and sections. These can then appear as nested items within an unordered list, making navigation a little easier.
Depending on your site’s ultimate (planned?) size, though, even this can look a bit messy for visitors. My solution, like many people, was a collapsing menu. These are extremely common online, and hide the nested lists unless you click on the headers to reveal their contents.
This shrinks the list and keeps the visitor from feeling overwhelmed when faced with the long list, while letting them check out topical areas that interest them. On this page, I’ll provide a basic option I was able to set up for a collapsing menu with annotations to allow for customizing the code.
There’s probably a lot more that can be done here, too, of course, that I haven’t even begun to learn yet. For now, this table of contents supports three levels of menus with custom bullet points, and also has an optional class to add to items that you haven’t yet completed, labeling them as such.
CSS
The first bits of the CSS included here merely set up a small box, title, and some other default stylings for the page in question. I’d guess you’ll probably want to change those, but I include them anyway to show what can be done; it’s rather simple to include this collapsing unordered list effect anywhere, provided you add the class (.eclipse) to the right place.
The rest of the CSS styles and prepares the unordered list for the visitor. While the code will (technically) work without this extra CSS, it doesn’t work in a sensical way, and modification are necessary to make this usable for your average visitor. I hope I’ve written decent documentation for the CSS itself below. There are instructions for changing the bullet points used by various levels of the Table of Contents (down to a depth of three), colors, etc. This will, I hope, allow most people to copy and use the code as their own, changing it as necessary.
/* we begin styling of the box which contains the table of contents. here, it's just in the middle of the page, and called "#contents," but could easily be renamed or removed, since it serves primarily an aesthetic function here, as does everything else between this and the unordered list styling itself */
#contents {
width: 40%;
background-color: white;
font-family: Helvetica;
margin: auto;
padding: 0 0 1.5em;
color: #400;
border: 1px dashed #f8c8c8;
}
#contents p {
padding: 1em;
text-align: justify;
margin: 0px;
}
/* a little fancy title, nothing more, dearies */
#contents h1 {
color: #ffffff;
background: #b35a60;
padding: 0.4em;
margin-bottom: 0px;
font-size: 4em;
font-variant: small-caps;
font-style: oblique;
font-family: impact;
letter-spacing: 0.1em;
line-height: 0.7em;
text-align: center;
margin-top: 0px;
text-shadow: 4px 3px 10px #8f484c;
}
/* and the chaos of unordered lists begins, which will allow, ultimately, for a pleasing appearance to the form itself. we shall begin with this tidbit, which makes sure that the menu is collapsed when it loads and that the interior sections don't initially display */
#unfolder {
font-weight: bold;
} /* this particular portion styles the initial link to open the index completely */
.hidden {
display: none;
}
.shown {
display: visible;
}
.eclipse + ul {
display: none;
}
/*the below part is important, though, because it provides feedback to the user - lets 'em know they can click on certain parts to see more. */
.eclipse {
cursor: pointer;
}
/* below organizes colors, padding, margins, etc, for the nested unordered lists within the table of contents. you can play with these a bit to */
#contents ul {
margin: 1em;
width: 84%;
margin: auto;
margin-top: 0em;
margin-bottom: 0em;
}
#contents ul ul li,
#contents ul ul ul li {
border: 0px;
}
#contents ul,
#contents ul ul,
#contents ul ul ul {
color: #b35a60;
padding-left: 0em;
padding-top: 0.4em;
padding-bottom: 0em;
}
/* the entry for list-style-type below will be the symbol to the left of top-level items */
#contents ul li {
list-style-type: "❁";
padding: 0.5em;
border-bottom: 1px dashed #f8c8c8;
text-align: left;
}
#contents ul li:last-child {
border-bottom: 0;
}
/* below, list-style-type designates the symbol of second-level items */
#contents ul ul li {
list-style-type: "➺";
}
/* and below, you can change the symbol for third-level items */
#contents ul ul ul li {
list-style-type: "❀";
}
/* i'm here going to style the links a bit, including their color, whether they're underlined, and a nice background color on hover; you can remove this if you want your theme to supersede it */
#contents li a {
color: #b35a60;
text-decoration: underline;
}
#contents li a:hover {
background-color: #f8c8c8;
color: #b35a60;
transition: 1s;
}
/* this part creates the .gray class, which you add to any list item (or an entire nested list) to turn it gray and demonstrate that it isn't finished. */
#contents .gray a {
color: #e3bec7;
text-decoration: none;
}
#contents .gray * {
color: #e3bec7;
}
#contents .gray a::before {
content: "∅";
font-weight: bold;
color: #e3bec7;
margin-right: 0.3em;
color: "#E3BEC7";
}
HTML
The HTML here is almost exactly like you’d expect of a series of nested, unordered lists. When you want to nest a list, place it directly within the existing list item of the top-level list. Just before that (before the <ul> tag for the nested list, that is), you’ll add an anchor tag and apply the .eclipse class to it, turning it into a clickable link that opens the (initially hidden) nested list.
For list items that go with content (ie, pages and sections) you've yet to post/complete, you can add the class .gray. This will gray out the link, and add a null symbol in front of it, to indicate to the visitor that it's just not there yet. If you're using that, be sure to apply the class directly to the list item in question (ie <li class="gray">). Don't apply it to the link/anchor.
Please note, though - jquery is required for this to actually work. This can be added by pasting <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> right before </body>, and frankly, I see no reason most people wouldn’t be using it already; most seem to.
<div id="contents">
<h1>Garden of Contents</h1>
<p>Welcome to the fabled garden, where you'll hopefully be able to find a flower suitable to your liking!</p>
<!-- These nested unordered lists are the Table of Contents itself. The a tags within them are either going to be normal, linking to a page like below, or.. -->
<ul>
<!-- below is an important part - the link at the very top of the index that toggles opening and closing all sections of the index at once. you can change the text it displays below -->
<li><a id="unfolder"><span id="uneclipse">Unfold all sections...</span><span id="uneclipsed" class="hidden">Hide all sections...</span></li>
<li><a href="#" name="Roses">Roses</a></li>
<!-- Lacking an href, they're clickable titles for nested sections within the table itself, ie, this one. To do this, you're going to want to apply that class (.eclipse) to the title of every nested part of list, as shown below -->
<li><a class="eclipse">Seasonal Blooms</a>
<ul>
<li><a href="#">Perpetual Flowerings</a></li>
<!-- As you can see below, applying the class .gray to any ul or li (nested or not) will gray it out and add a null symbol (configurable in the CSS) to indicate that it is unfinished -->
<li class="gray"><a href="#" class="eclipse">Hazards and Joys</a>
<!-- As you'll notice here, you can comfortably have a table of contents nested three levels deep. If you edit the CSS yourself, you can probably make it work for four levels or so, if absolutely necessary. -->
<ul>
<li><a href="#">Beagles and Digging</a></li>
<li><a href="#">Birds and Stuff</a></li>
</ul>
</li>
<!-- Here are some more examples of both nested, unnested, and grayed-out links -->
<li><a href="#">Spring</a></li>
<li><a href="#">Summer</a></li>
<li><a href="#">Autumn</a></li>
<li class="gray"><a href="#">Winter</a></li>
</ul>
</li>
<li class="gray"><a href="#">Growing Herbs</a></li>
<li><a href="#">Pollinators</a></li>
<li><a class="eclipse">Exotic Flowers</a>
<ul>
<li><a href="#">What are exotic flowers?</a></li>
<li><a href="#">Orchids</a></li>
<li><a href="#">Lotus</a></li>
</ul>
</li>
<li><a class="eclipse">Wildflowers</a>
<ul>
<li><a href="#">Why wildflowers?</a></li>
<li><a href="#">Daisies</a></li>
<li><a href="#">Dandelion</a></li>
</ul>
</li>
<li class="gray"><a href="#">Lawncare</a></li>
</ul>
</div>
<!-- we here have jquery, which MUST BE INCLUDED in order for this to work, but it really ought go at the bottom of your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Javascript
Include this Javascript, either between <script> tags just before your body tag closes, or in a separate Javascript file linked in the same location. Be sure to also include jquery as described above in the HTML section, too, or none of this will work. This particular magical paradigm (jquery, I mean), is, in fact, key to this whole thing - and specifically, this spell…
Using that, we’re able to create a sliding visibility effect. When the user clicks on something with the class .eclipse, lists directly following it to become visible, slowly. If you change the name of the class (.eclipse) in the (above) HTML and CSS, be sure to change it here, too! Also, by replacing the value ”slow” with "fast" or a number (which represents milliseconds, God help us) will change the speed at which the menu opens, if you care that much…
$(document).ready(function () {
$(".eclipse").click(function () {
$(this).next("ul").slideToggle("slow");
});
var lunarEclipse = $(".eclipse");
var eclipseRemoved = false;
$("#unfolder").click(function (event) {
event.preventDefault();
if (eclipseRemoved) {
lunarEclipse.each(function () {
$(this).addClass("eclipse").next("ul").hide();
});
$("#uneclipse").removeClass("hidden").addClass("shown");
$("#uneclipsed").removeClass("shown").addClass("hidden");
eclipseRemoved = false;
} else {
lunarEclipse.each(function () {
$(this).removeClass("eclipse").next("ul").show();
});
$("#uneclipsed").removeClass("hidden").addClass("shown");
$("#uneclipse").removeClass("shown").addClass("hidden");
eclipseRemoved = true;
}
});
});