A Pen by RenGM.

index.html

<div class="full-wrap">
<div class="menuwrap">
  <div class="menu">
    <div class="set" id="set1">
      <div class="head">Peace</div>
      <div class="desc">Lorem Ipsum Dolor set Amet</div>
      <div class="icon-heart ico"></div>
    </div>
    <div class="set" id="set2">
      <div data-content="Serenity" class="head">Serenity</div>
      <div class="desc">Lorem Ipsum Dolor set Amet</div>
      <div class="icon-globe ico"></div>
      <div class="icon-globe ico"></div>
    </div>
    <div class="set" id="set3">
      <div class="head">Happiness</div>
      <div class="desc">Lorem Ipsum Dolor set Amet</div>
      <div class="icon-smile ico"></div>
    </div>
    <div class="set" id="set4">
      <div class="head">Eternity</div>
      <div class="desc">Lorem Ipsum Dolor set Amet</div>
      <div class="icon-star ico"></div>
    </div>
  </div>
</div>
  
  <div class="content">
    <span><i class="icon-remove"></i> Close</span>
    <div id="page1" class="page">
      <h1>Peace</h1>
      <p>How far I fell before I regained control of the plane I do not know, but I must have been very close to the ground when I started to rise again, as I plainly heard the squealing of animals below me.  Rising again I scanned the heavens for my pursuers, and finally making out their lights far behind me, saw that they were landing, evidently in search of me.</p>

<p>Not until their lights were no longer discernible did I venture to flash my little lamp upon my compass, and then I found to my consternation that a fragment of the projectile had utterly destroyed my only guide, as well as my speedometer.  It was true I could follow the stars in the general direction of Helium, but without knowing the exact location of the city or the speed at which I was traveling my chances for finding it were slim.</p>

<p>Helium lies a thousand miles southwest of Zodanga, and with my compass intact I should have made the trip, barring accidents, in between four and five hours.  As it turned out, however, morning found me speeding over a vast expanse of dead sea bottom after nearly six hours of continuous flight at high speed.  Presently a great city showed below me, but it was not Helium, as that alone of all Barsoomian metropolises consists in two immense circular walled cities about seventy-five miles apart and would have been easily distinguishable from the altitude at which I was flying.</p>
    </div>
    <div id="page2" class="page">
      <h1>Serenity</h1>
      <p>My respite was short-lived however, for soon the entire party, numbering some thousand men, came charging into view, racing madly toward me.  I fired until my rifle was empty and they were almost upon me, and then a glance showing me that Dejah Thoris and Sola had disappeared among the hills, I sprang up, throwing down my useless gun, and started away in the direction opposite to that taken by Sola and her charge.</p>

<p>If ever Martians had an exhibition of jumping, it was granted those astonished warriors on that day long years ago, but while it led them away from Dejah Thoris it did not distract their attention from endeavoring to capture me.</p>

<p>They raced wildly after me until, finally, my foot struck a projecting piece of quartz, and down I went sprawling upon the moss.  As I looked up they were upon me, and although I drew my long-sword in an attempt to sell my life as dearly as possible, it was soon over.  I reeled beneath their blows which fell upon me in perfect torrents; my head swam; all was black, and I went down beneath them to oblivion.</p>
    </div>
    <div id="page3" class="page">
      <h1>Happiness</h1>
      <p>The nearer moon, hurtling suddenly above the horizon and lighting up the Barsoomian scene, showed me that my preserver was Woola, but from whence he had come, or how found me, I was at a loss to know.  That I was glad of his companionship it is needless to say, but my pleasure at seeing him was tempered by anxiety as to the reason of his leaving Dejah Thoris.  Only her death I felt sure, could account for his absence from her, so faithful I knew him to be to my commands.</p>

<p>By the light of the now brilliant moons I saw that he was but a shadow of his former self, and as he turned from my caress and commenced greedily to devour the dead carcass at my feet I realized that the poor fellow was more than half starved.  I, myself, was in but little better plight but I could not bring myself to eat the uncooked flesh and I had no means of making a fire.  When Woola had finished his meal I again took up my weary and seemingly endless wandering in quest of the elusive waterway.</p>

<p>At daybreak of the fifteenth day of my search I was overjoyed to see the high trees that denoted the object of my search.  About noon I dragged myself wearily to the portals of a huge building which covered perhaps four square miles and towered two hundred feet in the air.  It showed no aperture in the mighty walls other than the tiny door at which I sank exhausted, nor was there any sign of life about it.</p>
    </div>
    <div id="page4" class="page">
      <h1>Eternity</h1>
      <p>The vessels carrying our green warriors were kept circling above the contending fleets of Helium and Zodanga, since their batteries were useless in the hands of the Tharks who, having no navy, have no skill in naval gunnery.  Their small-arm fire, however, was most effective, and the final outcome of the engagement was strongly influenced, if not wholly determined, by their presence.</p>

<p>At first the two forces circled at the same altitude, pouring broadside after broadside into each other.  Presently a great hole was torn in the hull of one of the immense battle craft from the Zodangan camp; with a lurch she turned completely over, the little figures of her crew plunging, turning and twisting toward the ground a thousand feet below; then with sickening velocity she tore after them, almost completely burying herself in the soft loam of the ancient sea bottom.</p>

<p>A wild cry of exultation arose from the Heliumite squadron, and with redoubled ferocity they fell upon the Zodangan fleet.  By a pretty maneuver two of the vessels of Helium gained a position above their adversaries, from which they poured upon them from their keel bomb batteries a perfect torrent of exploding bombs.</p>
    </div>
  </div>
  
  <div class="info">Click on any option</div>
  
  <div class="credit"><a href="http://www.markopedia.org/">bg image courtesy: Marco's pedia</a> <a href="http://tympanus.net/codrops/">Inspired by the vast resources over at CoDrops</a></div>
</div>

Navigation-and-Pages.markdown

Navigation and Pages

A simple set of buttons and corresponding pages that appear, done using CSS3 and jQuery. Background pattern from http://www.markopedia.org/ and text from http://www.fillerati.com/

A Pen by RenGM on CodePen.

License.

script.js

$('div.info').hide().fadeIn(1000).delay(3500).fadeOut(800);

$('div.set').click(function() {
  $('div.content').addClass('show');
  $('div').removeClass('pagevis');
  
  if ($(this).is('#set1')) {
    $('div#page1').addClass('pagevis').siblings('div').removeClass('pageVis');
  }
  else if ($(this).is('#set2')) {
    $('div#page2').addClass('pagevis');
  }
  else if ($(this).is('#set3')) {
    $('div#page3').addClass('pagevis');
  }
  else {
    $('div#page4').addClass('pagevis');
  }
});//end set click i.e. content visible
$('div.content span').click(function() {
  $('div.content').removeClass('show');
});

style.css

@import url(http://fonts.googleapis.com/css?family=Rouge+Script|Oswald:400,300|Open+Sans);

/* ========= */
.full-wrap {
  min-width: 800px;
  max-width: 960px;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
  background: url(http://www.markopedia.org/wp-content/uploads/2013/05/light-seamless-tile-background-begyzezv.jpg) repeat;
  box-shadow: inset 0 0 9px rgba(0,0,0,0.8);
}
/* ========= */
.menuwrap {
  /*background: url(http://www.markopedia.org/wp-content/uploads/2013/05/light-seamless-tile-background-begyzezv.jpg) repeat;
  width: 100%;
  height: 525px;*/
}
.menu {
  width: 250px;
  padding: 20px;
  position: relative;
}
.menu .set {
  cursor: pointer;
  position: relative;
  width: 200px;
  overflow: hidden;
  min-height: 45px;
  padding: 25px;
  margin: 15px;
  background: #fff;
  border-left: 8px solid #FBA3A3;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
.menu .set:nth-child(n) {
  transform: rotate(5deg);
}
.menu .set:nth-child(2n) {
  transform: rotate(-2deg);
}
.menu .set:nth-child(3n) {
  transform: rotate(2deg);
}
.menu .set:hover {
  border-left: 8px solid #C95758;
  transform: scale(1.1,1.1);
}
div.head {
  position: absolute;
  top: 10px;
  font-family: 'Rouge Script';
  font-size: 50px;
  color: #FBA3A3;
}
div.desc {
  position: absolute;
  bottom: 15px;
  font-family: 'Oswald';
  font-size: 16px;
  color: #555;
}
div.ico {
  position: absolute;
  top: 25px;
  right: 20px;
  font-size: 40px;
  color: #C95758;
  opacity: 1;
  transform: rotate(-20deg) scale(1,1);
  z-index: -1;
  transition: all 0.5s ease;
}
div.set:hover div.ico {
  top: 10px;
  right: -20px;
  font-size: 200px;
  opacity: 0.3;
  transform: rotate(-10deg);
}
div.set:hover div.head {
  animation: headmove 0.5s ease;
}
@keyframes headmove {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }  
}
/* content ===================== */
.content {
  position: absolute;
  right: -600px;
  top: 0; bottom: 0;
  margin: 25px 0;
  width: 55%;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  border-left: 8px solid #FBA3A3;
  transition: all 0.5s ease;
}
.content span {
  position: absolute;
  bottom: 10px;
  color: #bbb;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Oswald';
  font-size: 12px; 
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.content span i {
  font-size: 16px;
  padding: 5px;
  padding-left: 0;
}
.content span:hover {
  color: #fff;
  background: #C95758;
}
.page {
  display: none;
  font-family: 'Open Sans';
  font-size: 14px;
  padding-right: 30px;
  background: #fff;
  position: absolute;
  z-index: 0;
}
.page p {
  padding: 8px 0;
  text-align: justify;
  text-indent: 50px;
}
.page h1 {
  font-family: 'Rouge Script';
  font-size: 50px;
  color: #FBA3A3;
}
div.show {
  right: 0;
}
div.show .pagevis {
  display: block;
  z-index: 10;
}

div.info {
  font-family: 'Oswald';
  font-size: 28px;
  text-transform: uppercase;
  position: absolute;
  right: 10%;
  top: 40%;
  padding: 25px;
  border-radius: 20px;
  border: 2px solid #fff;
  color: #fff;
  opacity: 0.3;
}

.credit {
  font-family: 'Open Sans';
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  position: absolute;
  bottom: 10px;
  left: 20%;
  opacity: 0.3;
}
.credit:hover {
  opacity: 0.8;
}
.credit a {
  color: #fff;
  text-decoration: none;
}