CodePen Embed - Fullscreen Menu

<div class="logo">
    <img src="https://witwinkel.ch/themes/witwinkel/assets/images/logo/witwinkel_white.png">
  </div>

<div class="hamburger">
  <div class="hamburger--container">
    <div class="hamburger--bars">
      
    </div>
  </div>
</div>


<div class="fsmenu">
  <div class="fsmenu--container">
    <div class="fsmenu--text-block">
      <div class="fsmenu--text-container">
        <ul class="fsmenu--list">
          <li class="fsmenu--list-element">
            <a href="#">
              <span>Agentur</span>
            </a>
            <div class="fsmenu--scrolling-text">
              <span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span>
            </div>
            <div class="fsmenu--link-img">
              <div class="fsmenu--img-container">
                <img src="https://witwinkel.ch/themes/witwinkel/assets/images/content/WITWINKEL-buero-albisrieden-2019.jpg">
              </div>
            </div>
          </li>
          <li class="fsmenu--list-element">
            <a href="#">
              <span>Portfolio</span>
            </a>
            <div class="fsmenu--scrolling-text">
              <span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span>
            </div>
            <div class="fsmenu--link-img">
              <div class="fsmenu--img-container">
                <img src="https://witwinkel.ch/themes/witwinkel/assets/projects/gourmet-festival-2019/content12.jpg">
              </div>
            </div>
          </li>
          <li class="fsmenu--list-element">
            <a href="#">
              <span>Team</span>
            </a>
            <div class="fsmenu--scrolling-text">
              <span>Team</span><span>Team</span><span>Team</span><span>Team</span><span>Team</span>
            </div>
            <div class="fsmenu--link-img">
              <div class="fsmenu--img-container">
                <img src="https://witwinkel.ch/themes/witwinkel/assets/images/team/wirsind-witwinkel.jpg">
              </div>
            </div>
          </li>
          <li class="fsmenu--list-element">
            <a href="#">
              <span>Kontakt</span>
            </a>
            <div class="fsmenu--scrolling-text">
              <span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span>
            </div>
            <div class="fsmenu--link-img">
              <div class="fsmenu--img-container">
                <img src="https://witwinkel.ch/themes/witwinkel/assets/projects/metzler/content1.jpg">
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<main>
  <img src="https://witwinkel.ch/themes/witwinkel/assets/projects/alfa-romeo-alfabet/content1.jpg">
</main>

*
  margin: 0
  padding: 0
  box-sizing: border-box
  
body, html 
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  font-family: 'Source Sans Pro', sans-serif
  color: #454545
  letter-spacing: .5px
  position: relative

body
  padding: 8em 3em 3em
  main
    width: 100%
    height: auto
    img
      width: 100%
      display: block
    h1
      font-size: 3em
      font-weight: 900
      text-transform: uppercase
      color: #1e1e1e

.hamburger
  width: 2em
  height: 2em
  position: absolute
  top: 3em
  right: 3em
  z-index: 10000
  background: transparent
  cursor: pointer
  &.is-active
    .hamburger--container
      .hamburger--bars
        background: white
        &:before,
        &:after
          background: white
        &:before
          left: .25em
        &:after
          left: -.25em
    
  .hamburger--container
    width: 100%
    padding: .25em
    position: relative
    .hamburger--bars
      height: 3px
      width: 1.5em
      background: #000
      position: absolute
      top: 0.9em
      transition: .3s ease
      &:before,
      &:after
        content: ""
        display: block
        height: 3px
        width: 1.5em
        background: inherit
        position: absolute
        left: 0
        transition: .3s ease
      &:before
        top: -.5em
      &:after
        top: .5em
          
        
.logo
  width: 5em
  height: 5em
  position: absolute
  top: 1.5em
  left: 3em
  z-index: 10000
  filter: invert(1)
  img
    width: 100%
    display: block
    transition: .3s linear .3s
  &.is-active
    img
      filter: invert(100%)        
    

.fsmenu
  width: 100vw
  height: 100vh
  position: absolute
  top: 0
  right: 0
  z-index: 1000
  overflow: hidden
  display: none
  
  .fsmenu--container
    width: 0
    height: 100vh
    padding: 8em 3em 3em 
    background: #000
    position: absolute
    right: 0
    overflow: hidden
    .fsmenu--text-block
      width: 100%
      height: 100%
      .fsmenu--text-container
        width: 100%
        height: 100%
        .fsmenu--list
          width: 100%
          height: 100%
          display: flex
          flex-direction: column
          .fsmenu--list-element
            width: 100%
            height: 25%
            list-style-type: none
            text-align: right
            a
              width: 100%
              height: 100%
              text-decoration: none
              color: white
              display: flex
              justify-content: flex-end
              align-items: center
              transition: .2s ease
              &:hover
                color: #E63946
              span
                font-size: 5em
                font-weight: 700
                letter-spacing: 10px
                text-transform: uppercase
                line-height: 1
                
                height: 1em
                display: inline-block
                position: relative
                z-index: 1002
                &:before
                  content: ""
                  display: block
                  width: 100%
                  height: 100%
                  background: #fff
                  position: absolute
                  left: 0
                  z-index: 1003
            .fsmenu--scrolling-text
              height: 100%
              display: flex
              align-items: center
              transform: translate(-20%, -100%)
              opacity: 0
              pointer-events: none
              span
                height: 1em
                font-size: 8em
                font-weight: 900
                letter-spacing: 10px
                text-transform: uppercase
                line-height: 1
                color: #1e1e1e
        
                display: inline-block
                margin-right: 1em
            &:hover
              .fsmenu--scrolling-text
                opacity: 1
                animation: animScrollingContactTextLeft 9s linear 0s infinite
              
            .fsmenu--link-img
              width: 0px
              height: 100vh
              padding: 8em 3em 3em
              position: absolute
              top: 0
              right: calc(100vw - 720px)
              z-index: 1001
              font-size: 16px
              pointer-events: none
              .fsmenu--img-container
                height: 100%
                width: 100%
                position: relative
                overflow: hidden
                img
                  width: 624px
                  display: block
                  position: absolute
                  right: 0
                  top: 50%
                  transform: translate(0, -50%)
            &.open
              .fsmenu--link-img
                left: auto
                right: calc(100vw - 720px)
                animation: animMenuRevealImg .4s ease 0s forwards
                .fsmenu--img-container
                  img 
                    right: 0
                    left: auto
            &.is-closing
              .fsmenu--link-img
                left: 0
                right: auto
                animation: animMenuCloseImg .4s ease 0s forwards
                .fsmenu--img-container
                  img 
                    left: 0
                    right: auto
        
                
  
  &.is-active
    display: block
    .fsmenu--container
      animation: animMenuReveal .6s cubic-bezier(.13,.13,.02,1.07) 0s forwards
      .fsmenu--text-block
      .fsmenu--text-container
        .fsmenu--list
          .fsmenu--list-element
            a
              span
                &:before
                  animation: animMenuRevealLinks .4s cubic-bezier(.13,.13,.02,1.07) .4s forwards
    
    
  &.close-menu
    display: block
    .fsmenu--container
      width: 100vw
      right: auto
      left: 0
      animation: animMenuClose .6s cubic-bezier(.13,.13,.02,1.07) .3s forwards
      .fsmenu--text-block
      .fsmenu--text-container
        .fsmenu--list
          .fsmenu--list-element
            a
              span
                &:before
                  left: auto
                  right: 0
                  background: black
                  animation: animMenuCloseLinks .4s cubic-bezier(.13,.13,.02,1.07) 0s forwards
    
    
@keyframes animMenuReveal
  0%
    width: 0vw
  100%
    width: 100vw  

@keyframes animMenuRevealLinks
  0%
    width: 100%
  100%
    width: 0%

@keyframes animMenuClose
  0%
    width: 100vw
    padding: 8em 3em 3em 
  100%
    width: 0vw
    padding: 8em 0 0 

@keyframes animMenuCloseLinks
  0%
    width: 0%
  100%
    width: 110%


@keyframes animMenuRevealImg
  0%
    width: 0
  100%
    width: 720px

@keyframes animMenuCloseImg
  0%
    width: 720px
  100%
    width: 0

@keyframes animScrollingContactTextLeft
  0%
    transform: translate(-20%, -100%)
  100%
    transform: translate(-40%, -100%)

View Compiled

$(document).ready(function(){

  
  $('.hamburger').click(function(){
    
    var $this = $( this );
    
    if ($this.hasClass('is-active')){
      $('.fsmenu, .logo').removeClass('is-active');
      $('.fsmenu, .logo').addClass('close-menu');
    } else{
      $('.fsmenu, .logo').removeClass('close-menu');
      $('.fsmenu, .logo').addClass('is-active');
    };
    $this.toggleClass('is-active');
  });
  
  $( ".fsmenu--list-element" ).hover(
    function() {
      $( this ).addClass('open');
      $( this ).removeClass('is-closing');
    }, function() {
      $( this ).removeClass('open');
      $( this ).addClass('is-closing');
    }
  );
        
});

This Pen is owned by Timo Kern on CodePen.

See more by @timokern on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js