App Navigation

app-navigation.markdown

App Navigation

Concept for mobile app navigation.

A Pen by Ian Turner on CodePen.

License.

index.html

<div class="wrapper">
  <h1>Menu</h1>
  <a class="menu-btn" onclick="toggleMenu()"></a>
  <section class="one" onclick="goToPage(0)">
    <h1>Profile</h1>
  </section>
  <section class="two" onclick="goToPage(1)">
    <h1>Friends</h1>
  </section>
  <section class="three" onclick="goToPage(2)">
    <h1>Messages</h1>
  </section>
  <section class="four" onclick="goToPage(3)">
    <h1>Settings</h1>
  </section>
</div>

script.js

var pages = new Array('one', 'two', 'three', 'four');

function toggleMenu() {
 document.getElementsByClassName('wrapper')[0].classList.toggle('menu-open');
}

function goToPage(page) {
  var wrapper = document.getElementsByClassName('wrapper')[0];
  var sections = document.getElementsByTagName('section');
  for (i = 0; i < sections.length; i++) {
    sections[i].classList.remove('before','after');
    if (i > page) {
      sections[i].classList.add('after');
    }
  }
  wrapper.classList.remove('menu-open','page-one','page-two');
  wrapper.classList.add('page-' + pages[page]);
}

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato);

$color1: #f75b5b;
$color2: #c84051;
$color3: #4f3462;
$color4: #794d9a;

* {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 62.5%;
  font-family: 'Lato', sans-serif;
}

body {
 background: #1f252d; 
}

.wrapper {
  height: 480px;
  width: 320px;
  background: #2e394b;
  overflow: hidden;
  position: relative;
  margin: 20px auto 0;
}

.menu-btn {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 70px;
  width: 54px;
  cursor: pointer;
  background: url(https://iamturner.co.uk/codepen/menu-icon.png) no-repeat center;
  background-size: 44px;
  
  &:active {
    opacity: 0.2;
  }
  
}

section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
  -webkit-transition: -webkit-transform 0.3s;
  
  &.one {
    background: $color1;
    -webkit-transition-delay: 0s;
  }
  
  &.two {
    background: $color2;
    -webkit-transition-delay: 0.05s;
  }
  
  &.three {
    background: $color3;
    -webkit-transition-delay: 0.1s;
  }
  
  &.four {
    background: $color4;
    -webkit-transition-delay: 0.15s;
  }
  
  &.after {
    -webkit-transform: translateY(100%);
  }
  
}

h1 {
  color: white;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
  margin: 0;
  line-height: 70px;
  -webkit-user-select: none;
}

.page-one {
  section {
    &.one { -webkit-transition-delay: 0s; }
    &.two { -webkit-transition-delay: 0.15s; }
    &.three { -webkit-transition-delay: 0.1s; }
    &.four { -webkit-transition-delay: 0.05s; } 
  } 
}

.page-two {
  section {
    &.one { -webkit-transition-delay: 0s; }
    &.two { -webkit-transition-delay: 0.05s; }
    &.three { -webkit-transition-delay: 0.1s; }
    &.four { -webkit-transition-delay: 0.05s; } 
  } 
}

.menu-open {
  
  section {
    cursor: pointer;
    
    &.one {
      -webkit-transform: translateY(70px);
      -webkit-transition-delay: 0.15s;
      
      &:active {
        background: lighten($color1, 3%);
      }
      
    }
    
    &.two {
      -webkit-transform: translateY(140px);
      -webkit-transition-delay: 0.1s;
      
      &:active {
        background: lighten($color2, 3%);
      }
      
    }
    
    &.three {
      -webkit-transform: translateY(210px);
      -webkit-transition-delay: 0.05s;
      
      &:active {
        background: lighten($color3, 3%);
      }
      
    }
    
    &.four {
      -webkit-transform: translateY(280px);
      -webkit-transition-delay: 0s;
      
      &:active {
        background: lighten($color4, 3%);
      }
      
    }
    
  }
  
  &.page-one {
    section {
      &.one { -webkit-transition-delay: 0s; }
      &.two { -webkit-transition-delay: 0.05s; }
      &.three { -webkit-transition-delay: 0.1s; }
      &.four { -webkit-transition-delay: 0.15s; }
    }
  }
  
  &.page-two {
    section {
      &.one { -webkit-transition-delay: 0s; }
      &.two { -webkit-transition-delay: 0.05s; }
      &.three { -webkit-transition-delay: 0.1s; }
      &.four { -webkit-transition-delay: 0.15s; } 
    } 
  }
  
}