<!--[if lt IE 10]><script>
/*global window, $, document*/

window.e = ['article', 'section'];
for(var i = window.e.length; i--;) { document.createElement(window.e[i])}

$(document).ready(function () {
    'use strict';

    var checks = $('.check'),
        content = $('#content'),
        navigator = $('.shownavigation');

    $(checks[0]).addClass('active');
    $(checks).css({"display": "inline-block"});

    navigator.on('click', function () {
        checks.toggle();
    });

    checks.show().on('click', function () {
        var self = $(this),
            page = self.data("page");

        checks.each(function () {
            $(this).removeClass('active');
        });

        self.addClass('active');

        content.stop().animate({ "top": '-' + page + '%' }, 250);
    });
});
</script><![endif]-->

<section id="book">
  <input id="showradio" type="checkbox" name="navigation" checked="checked"/>
  <label for="showradio" class="shownavigation"></label>

  <input class="move" id="page1" type="radio" name="navigation" checked="checked"/>
  <label data-page="0" for="page1" class="check radio home"></label>

  <input class="move" id="page2" type="radio" name="navigation"/>
  <label data-page="100" for="page2" class="check radio book"></label>

  <input class="move" id="page3" type="radio" name="navigation"/>
  <label data-page="200" for="page3" class="check radio mail"></label>

  <input class="move" id="page4" type="radio" name="navigation"/>
  <label data-page="300" for="page4" class="check radio find"></label>


  <section id="content">
    <article class="page" id="one">&nbsp</article>
    <article class="page" id="two">&nbsp</article>
    <article class="page" id="three">&nbsp</article>
    <article class="page" id="four">&nbsp</article>
  </section>
</section>
article,
section { display: block; }

html,
body { overflow: hidden; }

html,
body,
#content,
.page {  
    width: 100%;
    height: 100%;
}

.check,
.shownavigation {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: #ccc;
    background-color: rgba(255,255,255,.1);
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    transition: all 0.25s ease;
    position: relative;
    top: 2em;
    left: 2em;
    box-shadow: inset 0 1px 2px #333;
    display: inline-block;
}

.shownavigation:after {
    position: absolute;
    content: '';
    width: 40%;
    height: 3px;
    background-color: #555;
    top: 50%;
    margin-top: -1px;
    left: 30%;
    box-shadow: 0 -7px #555, 0 7px #555;
}

input,
.check { display: none; }

.check:hover,
.shownavigation:hover {
    background-color: #f0f0f0;
    background-color: rgba(255,255,255,.75);
    box-shadow: 0 1px 2px #333;
}

#showradio:checked + label,
.move:checked + label,
.move:checked + label:hover {
    background-color: #000;
    background-color: rgba(255,255,255,.5);
    cursor: default;
    box-shadow: 0 1px 2px #333;
}

#showradio:checked + label { cursor: pointer; }

#showradio:checked + label:hover {background-color: #fff;}

#content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    transition: all 0.25s ease-out;
}

.page {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
}

#one {
    background-color: #00acee;
    background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/home-512.png);
}

#two {
    background-color: #3b5998;
    background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/book_alt2-512.png);
}

#three {
    background-color: #dc4b39;
    background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/mail-512.png);
}

#four {
    background-color: #989898;
    background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/magnifying_glass-512.png);
}

#showradio:checked ~ .radio { display: inline-block; }

.home { background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/home-20.png); }

.mail { background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/mail-20.png); }

.find { background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/magnifying_glass-20.png); }

.book { background-image: url(http://cdn3.iconfinder.com/data/icons/iconic-1/32/book_alt2-20.png); }

.active { background-color: #fff; }

@media (min-width:641px) {
    #page2:checked ~ #content { top: -100%; }
    #page3:checked ~ #content { top: -200%; }
    #page4:checked ~ #content { top: -300%; }
}

@media (max-width:640px) {
    .check,
    .shownavigation {
        width: 40px;
        height: 40px;
    }

    .page { display: none; }

    #page1:checked ~ #content #one,
    #page2:checked ~ #content #two,
    #page3:checked ~ #content #three,
    #page4:checked ~ #content #four { display: block; }

    .shownavigation,
    #showradio:checked ~ .radio { display: block; }
}

@media (max-width:480px) {
    .check,
    .shownavigation {
        top: 0.25em;
        left: 0.25em;
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js