(SCSS) Responsive Menu Hover Effect

Responsive Menu Hover Effect:
  1. Call jquery library ->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async'></script>
  2. SCSS ->
    @import url("https://fonts.googleapis.com/css?family=Anton|Josefin+Sans");
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: white;
      border-top: 1px solid #000;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #1a1a1a;
      height: 5px;
    }
    
    * {
      box-sizing: border-box;
    }
    
    /*html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
      background: #000;
    }
    
    .page {
      width: 720px;
      float: left;
      position: relative;
      left: 50%;
      margin-left: -360px;
      padding: 10px;
    }
    .page h1, .page p {
      float: left;
      width: 100%;
      color: #fff;
      font-family: 'Josefin Sans', sans-serif;
    }
    .page h1 {
      text-transform: uppercase;
      margin-top: 115px;
      text-align: center;
      letter-spacing: 10px;
    }
    .page p {
      line-height: 20pt;
      font-size: 14pt;
      font-weight: 100;
      text-align: justify;
    }*/
    
    .menu {
      opacity: 0;
      pointer-events: none;
      background: #fff;
      width: 80%;
      float: left;
      height: 100%;
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      border-left: 15px solid #333;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
    }
    .menu.open {
      opacity: 1;
      pointer-events: all;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
    }
    
    ul {
      float: right;
      list-style: none;
      position: fixed;
      color: #000;
      right: 70px;
      font-size: 40pt;
      top: 50%;
      margin-top: -190px;
      font-family: 'Josefin Sans', sans-serif;
      text-transform: uppercase;
    }
    ul li {
      float: left;
      clear: both;
      width: 100%;
      margin: 20px 0px 20px 0px;
      text-align: right;
      position: relative;
      letter-spacing: 20px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      cursor: pointer;
    }
    ul li:hover {
      letter-spacing: 2px;
      padding-right: 20px;
      color: #31f4d6;
    }
    ul li:hover:after {
      border: 8px solid #f431d6;
    }
    ul li:hover:before {
      opacity: 1;
      -webkit-animation: hoverRotate .5s;
      /* Safari 4.0 - 8.0 */
      -webkit-animation-delay: .1s;
      -webkit-transform: rotate(45deg) translate(0px, 0px);
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
    }
    ul li:after {
      content: '';
      float: left;
      position: absolute;
      width: 40px;
      border-radius: 500px;
      height: 40px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      border: 8px solid #000;
      right: -50px;
      z-index: -1;
      top: -7px;
    }
    ul li:before {
      content: '';
      float: left;
      position: absolute;
      width: 70px;
      height: 10px;
      background: #f4e931;
      right: -57px;
      top: 17px;
      -webkit-transform: rotate(-45deg) translate(-60px, 0px);
      opacity: 0;
      z-index: 10000;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -webkit-transition-delay: .1s;
      transition-delay: .1s;
    }
    
    .burger {
      width: 50px;
      float: left;
      position: fixed;
      right: 30px;
      z-index: 10000;
      top: 20px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      cursor: pointer;
    }
    .burger span {
      width: 100%;
      float: left;
      height: 7px;
      background: #fff;
      margin-top: 10px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
    }
    .burger:hover span {
      background: #31f4d6 !important;
    }
    .burger.open span {
      background: #000;
    }
    .burger.open span:nth-child(1) {
      -webkit-transform: rotate(45deg) translate(10px, 10px);
    }
    .burger.open span:nth-child(2) {
      -webkit-transform: rotate(-45deg) translate(0px, -5px);
    }
    .burger.open span:nth-child(3) {
      opacity: 0;
    }
    
    @-webkit-keyframes hoverRotate {
      0% {
        -webkit-transform: rotate(-45deg) translate(-60px, 0px);
      }
      50% {
        -webkit-transform: rotate(-45deg) translate(0px, 0px);
      }
      100% {
        -webkit-transform: rotate(45deg) translate(0px, 0px);
      }
    }
    @media screen and (max-width: 750px) {
      .page {
        width: 100%;
        left: 0%;
        padding: 20px;
        margin-left: -0px;
      }
    
      .menu {
        width: 100%;
        border: 0;
      }
    
      ul {
        right: 10px;
      }
      ul li {
        font-size: 18pt;
      }
      ul li:after {
        width: 100%;
        border-radius: 0px;
        height: 3px;
        position: absolute;
        background: #f4e931;
        border: 0px;
        top: 40%;
      }
      ul li:before {
        display: none;
      }
      ul li:hover:after {
        border: 0px;
        opacity: 0;
      }
    }
  3. Js: ->
    $('.burger').click(function(){
      $(this).toggleClass('open');
      $('.menu').toggleClass('open');
    });
  4. Html Example ->
  5. Result ->

0 Response to "(SCSS) Responsive Menu Hover Effect"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...