How do I create CSS only tabs/pages with #hash URLs?

Question

I'm trying to create a single page site that uses CSS to navigate between different content.

I've read about :target and understand that this site will only work in Chrome, Firefox, IE9+, Safari, and Opera 9.5+.

How can I implement a CSS only navigation where only one section is visible at one time?

Answer 1

full demo

^{uses this menu.}

Layout

To do this, first layout your document so that you have multiple .pages, and each has a unique id.

<div class="page" id="home">
  <h1>Home</h1>
  <div class="body">
  </div>
</div>

Then create a menu, or some other structure that contains links. These should have hashes that match your ids. For example id="home" and href="#home".

<ul>
    <li><a href="#home">HOME</a></li>
</ul>

CSS

You now have to decide how you want your pages to transition. I choose to use a combination of top and opacity.

Also note, that it's highly recommended to set your elements initial position to the top of the page. When you click one of those links, the browser will automatically make the top-left of the element visible. If you want it to move horizontally or vertically, place an element inside it, and transition its position (for example, h1 or .body).

.page {
  width: 100%;
  position: absolute;
  top: -500em; left: 0;
  max-height: 0;
  transition: all .5s ease; /* vendor prefixes recommended */
  pointer-events: none;
}

Any styles with :target take effect when the hash in the url is equal to an elements id. For example, this style will become active for #home.page when #home is the URL's hash.

.page:target {
  max-height: 300%;
  pointer-events: auto;
  top: 13em; 
}

You can also animate children of an active page, but remember to do .page:target h1 and not .page h1:target (there is only one or zero target elements at any one time).

.page > h1, .page > .body {
  transition: all .5s  cubic-bezier(1, .38, .70, 0);
  opacity: 0;
}

.page:target > h1, .page:target > .body {
  opacity: 1;
}

JavaScript (optional)

To help out JavaScript users a bit, we can tell the page to default to #home if there's no hash already set.

location.hash = location.hash || "home";

You could also do a redirect on your server using something like Apache's mod_rewrite.