November 25, 2015

Fancy navigation

Fancy navigation

A fancy navigation style based on the material design and animations.

HTML

<div class='contain'>
  <section class='home active'>
    <h1 class='title'>Home</h1>
  </section>
  <section class='about'>
    <h1 class='title'>About</h1>
  </section>
  <section class='work'>
    <h1 class='title'>Work</h1>
  </section>
  <section class='contact'>
    <h1 class='title'>Contact</h1>
  </section>
</div>
<a class='toggle' href='#'>
  <span class='bar'></span>
  <span class='bar'></span>
  <span class='bar'></span>
</a>

SASS

$body:    #f9f9f9
$home:    #2196F3
$about:   #FFC107
$work:    #4CAF50
$contact: #F44336

body
  font-weight: 300
  font-family: 'Raleway', sans-serif
  background: #fff
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 80%, rgba(0,0,0,0.15) 100%)
  overflow: hidden
  transform-style: preserve-3d
p
  color: #fff
  font-size: 22px
  font-family: 'Merriweather', serif
  text-align: center
  a
    color: #fff
    text-decoration: none
a.toggle
  display: block
  position: fixed
  top: 20px
  left: 25px
  z-index: 1000
  transform: rotate(0deg)
  transition: all 500ms
  .bar
    display: block
    width: 35px
    height: 4px
    margin: 6px auto
    background: rgba(0,0,0,0.25)
    transition: all 500ms
  &:hover
    .bar
      background: white
.contain
  width: 100%
  height: 100vh
  transition: all 500ms
  transform-style: preserve-3d
  section
    position: absolute
    top: 100vh
    width: 100%
    height: 100vh
    overflow: hidden
    transition: top 500ms
    transform-style: preserve-3d
    &.active
      top: 0
    &.home
      background: $home
    &.about
      background: $about
    &.work
      background: $work
    &.contact
      background: $contact
  h1
    margin: 0
    font-size: 64px
    
    text-align: center
    color: rgba(255,255,255,0.85)
    transition: transform 500ms
    transform-style: preserve-3d   

.contain.active
  transform: scale(0.65) translateY(-18%)
  transition: all 500ms
  transform-style: preserve-3d
  + a.toggle
    top: 30px
    left: 20px
    transform: rotate(225deg)
    transition: all 500ms
    transform-origin: center center
    .bar
      background: #646464
      transition: all 500ms
      &:nth-child(2)
        opacity: 0
        transition: opacity 0s
      &:nth-child(3)
        margin-top: -20px
        transform: rotate(90deg)
  section
    cursor: pointer
    overflow: hidden
    opacity: 1
    box-shadow: 0 0 40px rgba(0,0,0,0.25)
    transform-style: preserve-3d 
  h1
    transform: scale(0.5)
    transform-style: preserve-3d
    //&:hover
      //background: rgab(0,0,0,0.25)


@for $i from 1 through 4
  .contain section:nth-child(#{$i})
    z-index: 100 - $i
  .contain.active section:nth-child(#{$i})
    top: 48vh + (-12vh * $i)
    &:hover
      top: 47vh + (-12vh * $i)

jQuery

$('a.toggle').on('click', function(){
  $('section').scrollTop(0);
  $('.contain').toggleClass('active');
  return false;
})

$('section').on('click', function(){
  $('section').removeClass('active');
  $(this).addClass('active');
  $('.contain').removeClass('active');
})

Attachments:

I have used external attachments.

http://fonts.googleapis.com/css?family=Raleway:600,400,200,300
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Note:

Add this to the header section,

<meta name="viewport" content="width=device-width">
demo

No comments:

Post a Comment

Popular Posts

Views