Skip to content

Instantly share code, notes, and snippets.

/Timeline Style Navigation.markdown

Created May 6, 2016 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save anonymous/b1c2e80b772ecf79812513f09b27fbb0 to your computer and use it in GitHub Desktop.
Save anonymous/b1c2e80b772ecf79812513f09b27fbb0 to your computer and use it in GitHub Desktop.
Download ZIP
Timeline Style Navigation
Raw
index.html
<body data-spy="scroll" data-target="#navbar-example">
<div class="wrapper" >
<nav class="nav__wrapper" id="navbar-example">
<ul class="nav">
<li role="presentation" class="active">
<a href="#section1">
<span class="nav__counter">01</span>
<h3 class="nav__title">Intro</h3>
<p class="nav__body"><strong>Timeline-style navigation</strong>. Scroll down to see what happens, or click on a number in the nav.</p>
</a>
</li>
<li role="presentation">
<a href="#section2">
<span class="nav__counter">02</span>
<h3 class="nav__title">Section 2 Title</h3>
<p class="nav__body">Sed sit amet justo sed odio tempus tempus. Vestibulum sed varius mi, sit amet condimentum lacus.</p>
</a>
</li>
<li role="presentation">
<a href="#section3">
<span class="nav__counter">03</span>
<h3 class="nav__title">Section 3 Title</h3>
<p class="nav__body">Sed sit amet justo sed odio tempus tempus. Vestibulum sed varius mi, sit amet condimentum lacus.</p>
</a>
</li>
<li role="presentation">
<a href="#section4">
<span class="nav__counter">04</span>
<h3 class="nav__title">Section 4 Title</h3>
<p class="nav__body">Sed sit amet justo sed odio tempus tempus. Vestibulum sed varius mi, sit amet condimentum lacus.</p>
</a>
</li>
<li role="presentation">
<a href="#section5">
<span class="nav__counter">05</span>
<h3 class="nav__title">Section 5 Title</h3>
<p class="nav__body">Sed sit amet justo sed odio tempus tempus. Vestibulum sed varius mi, sit amet condimentum lacus.</p>
</a>
</li>
<li role="presentation">
<a href="#section6">
<span class="nav__counter">06</span>
<h3 class="nav__title">Section 6 Title</h3>
<p class="nav__body">Sed sit amet justo sed odio tempus tempus. Vestibulum sed varius mi, sit amet condimentum lacus.</p>
</a>
</li>
</ul>
</nav>
<section class="section section1" id="section1">
Scroll down or use the nav.
</section>
<section class="section section2" id="section2">
Section 2
</section>
<section class="section section3" id="section3">
Section 3
</section>
<section class="section section4" id="section4">
Section 4
</section>
<section class="section section5" id="section5">
Section 5
</section>
<section class="section section6" id="section6">
Section 6
</section>
</div>
</body>
Raw
script.js
// SMOOTH SCROLLING SECTIONS
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.scss
.wrapper {
min-height: 100vh;
font-family: 'Roboto Slab', serif;
font-weight: 300;
color: #fff;
position: relative;
}
section {
height: 100vh;
font-size: 40px;
font-weight: 100;
background-color: #22A7F0;
display: flex;
justify-content: center;
align-items: center;
$colors: white, #F64747, #22A7F0, #F9690E, #9B59B6, #03C9A9, #ffcc00;
@for $i from 1 through length($colors) {
&:nth-child(#{$i}) {
background: nth($colors, $i)
}
}
}
.nav {
&__wrapper {
position: fixed;
height: 100%;
padding: 30px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
}
& {
margin: 0 0 100px 30px;
}
&__counter {
font-size: 24px;
transition: all 0.15s ease-out;
}
&__title {
font-size: 32px;
font-weight: 300;
margin: 0 0 0.25em;
width: 300px;
height: 0;
overflow: hidden;
opacity: 0;
transition: height 0.3s ease-out, opacity 0.2s ease-out;
}
&__body {
font-weight: 100;
font-size: 18px;
font-size: 18px;
width: 300px;
height: 0;
overflow: hidden;
opacity: 0;
transition: height 0.3s ease-out, opacity 0.2s ease-out;
}
li {
position: relative;
transition: all 0.3s ease-out;
margin-bottom: 1em;
&:after {
content: '';
display: block;
border-left: 2px solid white;
border-top: 2px solid white;
height: 250px;
width: 20px;
position: absolute;
left: -30px;
top: 15px;
}
a {
display: block;
padding: 0;
color: #fff;
transition: all 0.15s ease-out;
&:hover {
background-color: transparent;
padding-left: 1em
}
&:focus {
background-color: transparent;
}
}
&.active {
pointer-events: none;
padding-left: 1em;
&:after {
width: 35px;
height: 400px;
top: 35px;
}
.nav__counter {
font-size: 48px;
}
.nav__title {
height: 40px;
opacity: 1;
overflow: visible;
}
.nav__body {
height: 100px;
opacity: 1;
overflow: visible;
}
}
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment