Responive side navs WTF

index.jade

#toggle.menuhint.mdi.mdi-menu
#side.mobile

  .bg.bgimg
  .bg.bggrad
  
  header
    svg(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', width='40px', height='40px', viewbox='0 0 1000 1000', version='1.1')
      g#Page-1(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
        path#BIO(d='M575.687472,867.358418 C746.512864,832.347977 875,681.178878 875,500 C875,292.893219 707.106781,125 500,125 C292.893219,125 125,292.893219 125,500 C125,681.177943 253.485809,832.346416 424.309883,867.357876 L262.367019,586.613277 C234.774069,538.778085 257.180327,500 312.410586,500 L687.587157,500 C742.818406,500 765.219736,538.784912 737.630724,586.613277 L575.687472,867.358418 Z M500,1000 C776.142375,1000 1000,776.142375 1000,500 C1000,223.857625 776.142375,0 500,0 C223.857625,0 0,223.857625 0,500 C0,776.142375 223.857625,1000 500,1000 Z', fill='#fff')
    span bio-senpai
  
  nav.menu
    a.action.home
      i.mdi.mdi-home
      span Přehled
    a.action.projects
      i.mdi.mdi-flask
      span Projekty
    a.action.vote
      i.mdi.mdi-thumbs-up-down
      span Návrhy
    a.action.news
      i.mdi.mdi-bell
      span Novinky
    a.action.FAQ
      i.mdi.mdi-library
      span Dotazy
    a.action.contact
      i.mdi.mdi-comment-text
      span Kontakt
    a.action.podcast
      i.mdi.mdi-microphone
      span Podcast
      
    footer
      .bginfo.action.mdi.mdi-information(onclick="toggleBg()")
      .action.mdi.mdi-magnify
      .action.mdi.mdi-wrench
      
  .overlay
    .infobox
      span.bginfo.action.mdi.mdi-backburger(onclick="toggleBg()")
      span
        a.action
          h1.title.bgianimate Ushinawareta Mirai wo Motomete
        p.additional.bgianimate Překládá Machy / 12 epizod
      
main

Responive side navs WTF.markdown

Responive side navs WTF

A Pen by Ovi Ovocný on CodePen.

License.

script.js

var side = document.getElementById('side');
var toggle = document.getElementById('toggle');
var bgimg = document.querySelector('.bgimg');
toggle.addEventListener('click', toggleMenu);

function toggleMenu() {
  side.classList.toggle('show');
  adjustToggle();
}

window.addEventListener('resize', adjustToggle);

function adjustToggle() {
  setTimeout(function(){
    var sw = window.getComputedStyle(side, null).getPropertyValue('width');
  var st = window.getComputedStyle(side, null).getPropertyValue('transform');
  var ww = window.innerWidth;
  var wh = window.innerHeight;
  if (ww < 600 || wh < 475) {
    toggle.style.left = sw;
    toggle.style.transform = st;
  }
  else {
    toggle.style.left = 0;
  toggle.style.transform = 0;
  }
  },200)
}

//


var bgshown = false;

function toggleBg() {
  if (!bgshown) {
    var bgpos = window.getComputedStyle(bgimg, null).getPropertyValue('transform');
    bgpos = bgpos.substring(19,24);
    bgimg.style.animationName = "none";
    Velocity(document.querySelector('.bggrad'), {
      opacity: 0
    }, 500);
    Velocity(document.querySelector('.menu'), {
      opacity: 0
    }, 300);
    Velocity(side, {
      width: "100vw"
    }, 500);
    Velocity(bgimg, {
      translateX: [0, bgpos]
    }, 500);
    Velocity(document.querySelector('.overlay'), {
      opacity: 1
    }, {
      delay: 200,
      duration: 300,
      display: "block"
    });
    Velocity(document.querySelectorAll('.bgianimate'), {
      translateX: [0, -20],
      opacity: 1
    }, {
      delay: 200,
      duration: 300
    })
    bgshown = true;
  } else {
    var h = window.innerHeight;
    var rw = 12;
    if (h < 475) rw = 24;
    if (h < 278) rw = 36;
    Velocity(document.querySelector('.bggrad'), {
      opacity: 1
    }, 500);
    Velocity(document.querySelector('.menu'), {
      opacity: 1
    }, 500);
    Velocity(side, {
      width: rw+"em"
    }, {
      duration: 500,
      complete: function(){
        side.style.width = ""
      }
    });
    Velocity(document.querySelector('.overlay'), {
      opacity: 0
    }, {
      duration: 300,
      display: "none"
    });
    bgimg.style.animationName = "pan";
    bgshown = false;
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

style.stylus

@import url('//cdn.materialdesignicons.com/1.5.54/css/materialdesignicons.min.css')

root = #009C59
light = #00FB90
mid = #00C772
dim = #007D47
dark = #005C35

*, *:before, *:after
  box-sizing border-box

body
  background #222
  font-family Fira Sans
  

.menuhint
  position fixed
  width 2em
  line-height 2em
  text-align center
  bottom 0
  color white
  font-size 1.3em
  cursor pointer
  transition left .4s, transform .4s
  transition-timing-function cubic-bezier(0.19, 1, 0.22, 1)
  
#side
  height 100vh
  overflow hidden
  position fixed
  width 12em
  transition transform .2s
@media screen and (max-width: 600px)
  .mobile
    transform translateX(-12em)
@media screen and (max-height: 475px)
  #side
    width 24em
  .mobile
    transform translateX(-24em)
@media screen and (max-height: 278px)
  #side
    width 36em
  .mobile
    transform translateX(-36em)
    
.show
  transform translateX(0)
  
header
  position absolute
  top 0
  left 0
  z-index 2
  color white
  display flex
  align-items center
  width 100%
  height 4em
  font 1.5em Unica One
  padding .2em
  cursor pointer
  & svg
    margin 0 .5em
  
.bg
  top 0
  width calc(100vw + 12em)
  height 100vh
.bgimg
  position relative
  background url('http://www.classywallpapers.com/wp-content/uploads/2016/03/Ushinawareta-Mirai-Wo-Motomete-1.jpg') center / cover
  animation pan 100s linear alternate infinite
.bggrad
  position absolute
  mix-blend-mode color
  background linear-gradient(to bottom, alpha(cyan,.7), alpha(light,.7))
  
.menu
  position absolute
  top 0
  left 0
  display flex
  flex-direction column
  justify-content center
  align-items flex-start
  width 12em
  height 100vh
  padding-top 5em
  flex-wrap wrap
  &::before
    content ""
    position absolute
    top 0
    left 0
    width 100vw
    height 100vh
    background #000b
  
  & a
    display flex
    align-items center
    color #eee
    width 100%
    height 1.5em
    margin .8em .5em
    z-index 2
  
    & i
      margin 0 .5em
      font-size 1.5em
      
.action
  transition color .2s
  cursor pointer
  &:hover
    color light
      
footer
  position absolute
  width 12rem
  height 3em
  display flex
  justify-content space-around
  align-items center
  color #eee
  font-size 1.4em
  z-index 2

@media screen and (min-height: 475px)
  footer
    bottom 0
    left 0
  .menu
    padding-bottom 3em
@media screen and (max-height: 475px)
  footer
    left 12rem
    top 1rem
  .home
    visibility hidden
    position fixed
    top -100%
    
header:hover ~ .menu .home
  color light
    
@keyframes pan
  to
    transform translateX(-100vw)
    
.overlay
  width 100vw
  height 100vh
  position absolute
  top 0
  left 0
  display none
  background linear-gradient(to top, #0008, transparent, #0005)
  
.infobox
  position absolute
  bottom 0
  color white
  padding 2em
  display flex
  align-items center
  
  & .bginfo
    font-size 1.8em
    margin-right .5em
    
.bgianimate
  margin 0
  
.title
  font-family Unica One
.additional
  font-size .8em
    
main
  width 100vw
  min-height 100vh