App Navigation

app-navigation.markdown

App Navigation

Concept for mobile app navigation.

A Pen by Alex Gray 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.coffeescript

pages = ['one', 'two', 'three', 'four']

window.toggleMenu = ->
  document.getElementsByClassName('wrapper')[0].classList.toggle 'menu-open'

window.goToPage = (page) ->
  wrapper = document.getElementsByClassName('wrapper')[0]
  sections = document.getElementsByTagName('section')
  for s,i in sections
    s.classList.remove 'before', 'after'
    if i > page
      s.classList.add 'after'
  wrapper.classList.remove 'menu-open', 'page-one', 'page-two'
  wrapper.classList.add 'page-' + pages[page]

style.stylus

@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(http://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