CSS-only navigation

css-only-navigation.css

/*
 * This CSS describes the basics of trick to make CSS-only navigation.
 * This type of navigation uses #anchors to switch pages.
 * In this CSS anchor #page-main as well as empty anchor (#) describes the main page.
 * Valid markup for this example:
 * <div class="pages">
 *     <div class="page"> Page content 1 </div>
 *     <div class="page"> Page content 2 </div>
 * </div>
 */

.pages > .page, .pages > .page:target ~ #page-main { /* #1 styles for hidden page */
    display: none; /* Or any other styles needed. */
}

#page-main, .pages > .page:target { /* #2 styles for selected page */
    display: block;
}