About: This is a fragment-indentifier based menu site. What it basically does is it follows the #hash in the address bar and then changes CSS from display:none to display:block for the id it is referencing.

For more detail see the howto page.
This file is mirrored on github

How to: Make a class and name it anything. If you look at the source of this page you'll see I named it "content". For its CSS define this .content { display: none } Now, every element with this class name will not be displayed. So, now make it show when targeted .content:target { display: block; } Now in the body make as many elements with that classname as you want and give each of them an id as if it were a page on a site, like home about contact etc <div id="about" class="content"> some content </div> And point to it with a link in a menu of some sort <a href="#about">about us</a> And now when you click on it, the fragment identifier (the hash in the address) changes to #page and the element with the id of #about turns from display: none; to display: block; Make as many of these as you want, when you click on one it changes the hash and replaces the targeted element with the new value of the hash.

One thing though: if there's no hash at initial opening of the site then there is no element shown. Here I used javascript location.hash.length == 0 ? location.hash = '#about' : null; to circumvent that but if you're trying to avoid using js then you have to rely on linking the site with the initial hash in the link or design the site so that everything is revolving around the menu that links to the pages.