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

i'm trying create single page site uses css navigate between different content.

i've read :target , understand site work in chrome, firefox, ie9+, safari, , opera 9.5+.

how can implement css navigation 1 section visible @ 1 time?

full demo

^{uses this menu.}

layout

to this, first layout document have multiple .pages, , each has unique id.

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

then create menu, or other structure contains links. these should have hashes match ids. example id="home" , href="#home".

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

css

you have decide how want pages transition. choose use combination of top , opacity.

also note, it's highly recommended set elements initial position top of page. when click 1 of links, browser automatically make top-left of element visible. if want move horizontally or vertically, place element inside it, , transition position (for example, h1 or .body).

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

any styles :target take effect when hash in url equal elements id. example, style become active #home.page when #home url's hash.

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

you can animate children of active page, remember .page:target h1 , not .page h1:target (there 1 or 0 target elements @ 1 time).

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

javascript (optional)

to out javascript users bit, can tell page default #home if there's no hash set.

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

you redirect on server using apache's mod_rewrite.