I get asked very often how the quick reference bar forĀ The Disease of Hope: Mao’s Great Famine was made. The quick reference bar is simply a HTML unordered list (ul) element that is styled with pure CSS to produce a “drop-up” menu effect upon hover.

Here’s how to go about creating one. First, create a custom theme and open the HTML/CSS editor in Weebly. Open the primary HTML file and scroll down to the footer area. Now add an HTML unordered list like so (if you don’t know HTML, try reading some of the resources available on HTML/CSS listed on the resources page):
<ul&gt <li&gt <a&gt <div&gt <h2&gt <p&gt </div&gt </li&gt </ul&gt

There are many ways you could structure this (using div's and id's), but this is how I did mine. After this, assign id’s to pretty much everything, so you can style them with CSS. First write CSS to build the footer itself, hiding the div in the li (so only the a element is showing). In other words, use CSS to make a horizontal navigation menu that anchors to the bottom of the page. If you don’t know how to write the CSS for this, look at any Weebly theme’s HTML/CSS for the navigation menu at the top of the page to get an idea (it’s also an unordered list full of list elements that are styled to be displayed horizontally with dropdowns). Now add CSS to make the div elements inside the list elements appear upon hover (once again, Weebly themes can be used as reference, as their navigation menus also have dropdowns). The easiest way to make this work is to add CSS styling for the “hover” action of the HTML elements and modify the “display” attribute upon hovering (ex. from display:none to display:block, or something like that).