Полноэкранная книга с помощью jQuery и CSS3

<div id="container" class="container">   
    <div class="menu-panel">
        <h3>Содержание</h3>
        <ul id="menu-toc" class="menu-toc">
            <li class="menu-toc-current"><a href="#item1">Страница 1</a></li>
            <li><a href="#item2">Страница 2</a></li>
            <li><a href="#item3">Страница 3</a></li>
            <li><a href="#item4">Страница 4</a></li>
            <li><a href="#item5">Страница 5</a></li>
        </ul>
    </div>
 
    <div class="bb-custom-wrapper">
        <div id="bb-bookblock" class="bb-bookblock">
            <div class="bb-item" id="item1">
                <div class="content">
                    <div class="scroller">
                        <h2>Страница 1</h2>
                        <p>...</p>
                    </div>
                </div>
            </div>
 
            <div class="bb-item" id="item2"><!-- ... --></div>
 
            <div class="bb-item" id="item3"><!-- ... --></div>
 
            <div class="bb-item" id="item4"><!-- ... --></div>
 
            <div class="bb-item" id="item5"><!-- ... --></div>
 
        </div>
        <nav>
            <a id="bb-nav-prev" href="#">←</a>
            <a id="bb-nav-next" href="#">→</a>
        </nav>
        <span id="tblcontents" class="menu-button">Содержание</span>
    </div>
</div>

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

html {
    height: 100%;
}
 
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: #333;
    height: 100%;
}

a {
    color: #555;
    text-decoration: none;
}
 
a:hover {
    color: #000;
}

.container,
.bb-custom-wrapper,
.bb-bookblock {
    width: 100%;
    height: 100%;
}
 
.container {
    position: relative;
    left: 0px;
    transition: left 0.3s ease-in-out;
}

.slideRight {
    left: 240px;
}

.no-js .container {
    padding-left: 240px;
}

.menu-panel {
    background: #f1103a;
    width: 240px;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.js .menu-panel {
    position: absolute;
    left: -240px;
}

.menu-panel h3 {
    font-size: 1.8em;
    padding: 20px;
    font-weight: 300;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}
 
.menu-toc {
    list-style: none;
}
 
.menu-toc li a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    line-height: 3.5;
    padding: 0 20px;
    cursor: pointer;
    background: #f1103a;
    border-bottom: 1px solid #dd1338;
}
 
.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
    background: #dd1338;
}

.bb-custom-wrapper nav {
    top: 20px;
    left: 60px;
    position: absolute;
    z-index: 1000;
}

.bb-custom-wrapper nav span,
.menu-button {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    left: 0;
    background: #f1103a;
    border-radius: 50%;
    color: #fff;
    line-height: 30px;
    text-align: center;
    speak: none;
    font-weight: bold;
    cursor: pointer;
}
 
.bb-custom-wrapper nav span:last-child {
    left: 40px;
}
 
.bb-custom-wrapper nav span:hover,
.menu-button:hover {
    background: #000;
}

.menu-button {
    z-index: 1000;
    left: 20px;
    top: 20px;
    text-indent: -9000px;
}

.menu-button:after {
    position: absolute;
    content: '';
    width: 50%;
    height: 2px;
    background: #fff;
    top: 50%;
    margin-top: -1px;
    left: 25%;
    box-shadow: 0 -4px #fff, 0 4px #fff;
}

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
    display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/page.js"></script>

<script>
    $(function() {
        Page.init();
    });
</script>