LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Menu

Profile

Friends

Messages

Settings

CSS
@import url(https://fonts.googleapis.com/css?family=Lato);
* {
  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;
}
.menu-btn: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;
}
section.one {
  background: #f75b5b;
  -webkit-transition-delay: 0s;
}
section.two {
  background: #c84051;
  -webkit-transition-delay: 0.05s;
}
section.three {
  background: #4f3462;
  -webkit-transition-delay: 0.1s;
}
section.four {
  background: #794d9a;
  -webkit-transition-delay: 0.15s;
}
section.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;
}
.page-one section.two {
  -webkit-transition-delay: 0.15s;
}
.page-one section.three {
  -webkit-transition-delay: 0.1s;
}
.page-one section.four {
  -webkit-transition-delay: 0.05s;
}

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

.menu-open section {
  cursor: pointer;
}
.menu-open section.one {
  -webkit-transform: translateY(70px);
  -webkit-transition-delay: 0.15s;
}
.menu-open section.one:active {
  background: #f86a6a;
}
.menu-open section.two {
  -webkit-transform: translateY(140px);
  -webkit-transition-delay: 0.1s;
}
.menu-open section.two:active {
  background: #cb4c5c;
}
.menu-open section.three {
  -webkit-transform: translateY(210px);
  -webkit-transition-delay: 0.05s;
}
.menu-open section.three:active {
  background: #57396c;
}
.menu-open section.four {
  -webkit-transform: translateY(280px);
  -webkit-transition-delay: 0s;
}
.menu-open section.four:active {
  background: #8152a4;
}
.menu-open.page-one section.one {
  -webkit-transition-delay: 0s;
}
.menu-open.page-one section.two {
  -webkit-transition-delay: 0.05s;
}
.menu-open.page-one section.three {
  -webkit-transition-delay: 0.1s;
}
.menu-open.page-one section.four {
  -webkit-transition-delay: 0.15s;
}
.menu-open.page-two section.one {
  -webkit-transition-delay: 0s;
}
.menu-open.page-two section.two {
  -webkit-transition-delay: 0.05s;
}
.menu-open.page-two section.three {
  -webkit-transition-delay: 0.1s;
}
.menu-open.page-two section.four {
  -webkit-transition-delay: 0.15s;
}
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]);
}
Host Instantly Drag and Drop Website Builder

 

Description

Concept for mobile app navigation.
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID