Menu over slide test

index.pug

nav
  ul
    li item 1
    li item 2
    li item 3
    li item 4
    li item 5
    li item 6
    li item 7
    li.slide
    
section
  div.title
    span yay
    span Inspired by
      a(target="_blanck")(href="http://imm-g-prod.com/acme/logistics-and-distribution") Acme experience

menu-over-slide-test.markdown

Menu over slide test

A Pen by Mr.Developer on CodePen.

License.

script.js

(function($){
  // variables
  elementWidth = $('ul').width(),
  containerWidth = $('nav').width(),
  difference = elementWidth-containerWidth,
  finalWidth = difference * 1.5,
  element = $('ul');

  // mouse move deplacement
  $('nav').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;
    if ( x >= finalWidth ) {
      element.css('left', finalWidth-x)
    }
  });
  
  // active on click
  $('li').on('click', function(){
    $('li').removeClass('active');
    $(this).addClass('active');
  });
  
})(jQuery);

scripts

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

style.stylus

// STANDARD
body
  margin 0
  padding 0
  font-family 'Open Sans', sans-serif

::selection
  background-color #F7CA18
  color #1b1b1b

// NAV  
nav
  width 100%
  background-color #0b0b0b
  position fixed
  bottom 0
  height 100px
  overflow hidden
  
  ul
    position absolute
    top 0
    left 0
    list-style-type none
    padding 0
    margin 0
    width 140vw
  li
    margin 0
    float left
    display inline-block
    height 98px
    margin-bottom 2px
    line-height 100px
    width 20vw
    text-align center
    color #555
    transition background-color .5s .2s ease, color .3s ease
    cursor pointer
    font-size 12px
    text-transform uppercase
    letter-spacing 4px
    font-weight 800
    transform: translateY(100%)
    // active class
    &.active
      background-color #151515
      color #efefef
      &::after
        content ""
        position absolute
        bottom -2px
        left 0
        width 100%
        height 2px
        background-color #F7CA18
    // Chained Animations
    for items in 1..7
      &:nth-child({items})
        animation: pop .5s .15s*items 1 forwards
    // hover state
    &:hover
      color #ececec
    // sliders
    &:nth-child(1):hover
      & ~ .slide
        left 0
    &:nth-child(2):hover
      & ~ .slide
        left 20vw
    &:nth-child(3):hover
      & ~ .slide
        left 40vw
    &:nth-child(4):hover
      & ~ .slide
        left 60vw
    &:nth-child(5):hover
      & ~ .slide
        left 80vw 
    &:nth-child(6):hover
      & ~ .slide
        left 100vw
    &:nth-child(7):hover
      & ~ .slide
        left 120vw
  li.slide
    position absolute
    left -20vw
    top 0
    background-color #fff
    z-index -1
    height 2px
    margin-top 98px
    transition left .3s ease
    transform: translateY(0)

    
// HOME PAGE
section
  background-color #1b1b1b
  height 100vh
  display flex
  .title
    max-width 60%
    width 100%
    align-self center
    transform translateY(-50px)
    margin 0 auto
    overflow hidden
    padding-bottom 10px
    span
      display inline-block
      font-size 5vw
      color #efefef
      width 100%
      text-transform uppercase
      transform translateX(-100%)
      animation byBottom 1s ease both
      font-weight 600
      letter-spacing 0.25vw
      &:last-child
        font-size 1rem
        animation byBottom 1s .25s ease both
      a
        position relative
        display inline-block
        margin-left 0.5rem
        text-decoration none
        color #F7CA18
        &::after
          content ""
          height 2px
          background-color #F7CA18
          position absolute
          bottom -10px
          left 0
          width 0
          animation linkAfter .5s 1s ease both
          
// Keyframes    
@keyframes pop
  0%
    transform: translateY(100%)
  100%
    transform: translateY(0)
    
@keyframes byBottom
  0%
    transform: translateY(150%)
  100%
    transform: translateY(0)
    
@keyframes linkAfter
  0%
    width 0
  100%
    width 30px