One-page overflowing HTML5 navigation template using CSS3 :target

by BinaryAcid

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<html>
    <body class='loading'>
    
<section id='loading'>
    <div>
        <h2>Simple 1-page navigation with CSS3 and :target</h2>
        This panel will show while loading your resources.
        It will disappear when the body class is removed.
    </div>
</section>
    
<section id='start'>
    <a href="#start">Start</a>
    <div>
        <h2>Simple 1-page navigation with CSS3 and :target</h2>
        <p>This is the startpage. </p>
        <p>window.location.hash is now '#start', making section id='start' the :target div.</p>
    </div>
</section>
<section id='step2'>
    <a href="#step2">Step2</a>
    <div>
    This is the 2nd page<br> <a href='#step4'>Jump to page 4</a>
    </div>
</section>
    
<section id='step3'>
    <a href="#step3">Step3</a>
    <div>
    This is the 3rd page
    </div>
</section>
    
<section id='step4'>
     <a href="#step4">Step4</a>
    <div>
       This is the 4th page
       (It's overflowing, scroll down)
    
       <p style='margin-top: 1000px'>It even scrolls on webkit without iScroll!</p>
    </div>
</section>
    
<section id='step5'>
     <a href="#step5">Step5</a>
     <div>
        This is the 5th page
    </div>
</section>
    
<section id='step6'>
     <a href="#step6">Step6</a>
    <div>
        This is the 6th page
    </div>
</section>
         
    </body>
</html>

CSS

* { font-family: arial; }
section { float: left; }

section > div {
  display: block; 
  position: fixed; 
  left: 5%; top:40px; bottom: 5%; right: 5%;
  border: 1px solid #efefef; 
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(25,25,25,0.5);  
  transition: transform .5s ease-in;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* one-page scrolling for safari mobile, see step4 */
  padding: 20px;
}

section:not(:target) > div {
    transform: translateX(-1000px); /* Put all inactive sections off-page */
    z-index: 9000;
    background-color:white;
    z-index: 50;
}

body.loading * {
    transition: none !important; /* Prevent stuff from transitioning off-screen */
}
body.loading section#loading > div {
    transform: translateX(0) !important;    
}


section:target > div { /* Translate the active section on-screen */
    z-index: 100;
    transform: translateX(0);
}


a {
    display: inline-block;
    background-color: rgba(0,150,0,0.2);
    padding: 5px;
    border: 1px solid black;
    margin: 5px;
    color:black;
    text-decoration: none;
    border-radius: 5px;
    position: relative;
}

section:target >a { /* Styling the active link */
    background-color: green;
    color:white;
}


h2 { font-size: 20px; }

JavaScript

/* You can also do this on domready or onload ofcourse */
setTimeout(function() {
    document.body.className = '';
    window.location.hash = 'start';

}, 1500);