You could set up your “Blue” pages with an introductory section followed by “toggles” (see below),  which could have extra text (or pictures, or both) inside them. You could put links to each of the individual toggles on your menu.

Don’t worry about how this page looks — I know it’s ugly as sin, and it pains me — I’m just trying to provide some working vocabulary.

On your page, the side menu would stay in a fixed position when you scrolled instead of disappearing as the page moved. I just haven’t set it up because I’m just putting this up quick and dirty on my own website just for the sake of speed. However, working out all of that is what the design stage of this project is all about.

This is a toggle in its closed state

It will reveal more information when clicked. Click it again to close it up.

It’s possible to have a toggle’s default state by opened, so that it shows its content when the page loads.

This toggle has a default "Open State"

Don’t worry about how these things look right now — we can change the color, typography, shading, etc. later. This is just explanatory.

It would be a good idea to add links to individual case studies in each toggle, but I would recommend against putting in a grid of them within each toggle, for the simple reason that if you have a dozen toggles on page, each with a bunch of graphics, javascript, etc., you’re going to have a very slow loading page, and maybe a buggy one.

Related Case Studies (you could add more than one)

Sample case study

You could have separate toggles for a sub-section

They could be indented, or different colored, or with a smaller font, etc. — anything to clearly indicate that they’re part of another section.




Work with Us
Featured Projects

Pin It on Pinterest

Share This