A Pen by Vergil Penkov

Thumbnail
This awesome code was written by VPenkov, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright VPenkov ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" class="js">

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Vergil Penkov</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<nav role="navigation" class="nav scr-small">
  <a href="#" class="menu-toggle"></a>
  <ul>
    <li><a href="#">Link</a>
      <ul>
        <li><a href="#">Submenu</a>
          <ul>
            <li><a href="#">Level 3</a>
              <ul>
                <li><a href="#">Level 4, but can go to infinity!</a></li>
                <li><a href="#">Level 4, but can go to infinity!</a></li>
                <li><a href="#">Level 4, but can go to infinity!</a></li>
                <li><a href="#">Level 4, but can go to infinity!</a></li>
              </ul>
            </li>
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/VPenkov/a-pen-by-vergil-penkov-HshuB */
.menu-toggle {
  position: relative;
  padding: 15px;
}
.menu-toggle:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 19px;
  height: 3px;
  background: #000;
  -webkit-box-shadow: 0 .5em 0 0 #000,0 1em 0 0 #000;
  box-shadow: 0 .5em 0 0 #000,0 1em 0 0 #000;
  -webkit-transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
}
.menu-toggle:hover,
.menu-toggle.active {
  background: #000;
}
.menu-toggle:hover:before,
.menu-toggle.active:before {
  background-color: #fff;
  -webkit-box-shadow: 0 .5em 0 0 #fff,0 1em 0 0 #fff;
  box-shadow: 0 .5em 0 0 #fff,0 1em 0 0 #fff;
}
.nav ul,
.nav li {
  position: relative;
}
.nav > ul {
  -webkit-transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  will-change: transform;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.nav a {
  display: block;
}
.nav li {
  -webkit-transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
}
@media screen and (max-width: 992px) {
  .nav .menu-toggle {
    display: inline-block;
  }
  .nav .menu-toggle + ul {
    -webkit-transform: translateX(-250px) scale(0);
    -ms-transform: translateX(-250px) scale(0);
    transform: translateX(-250px) scale(0);
    opacity: 0;
    max-width: 250px;
    background: #333;
  }
  .nav .menu-toggle + ul.opened {
    -webkit-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  .nav li:hover > a {
    background: #666666;
  }
  .nav ul a {
    padding: 15px 20px;
    color: #fff;
  }
}
@media screen and (min-width: 992px) {
  .nav li {
    display: inline-block;
  }
  .nav .menu-toggle {
    display: none;
  }
  .nav ul ul {
    position: absolute;
  }
  .nav ul ul a {
    padding-right: 10px;
    white-space: nowrap;
  }
  .nav ul ul li {
    display: block;
  }
  .nav ul ul ul {
    top: 0;
  }
}
.no-js .nav .menu-toggle:hover + ul,
.no-js .nav .menu-toggle + ul:hover {
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
  opacity: 1;
}
.no-js .nav ul {
  -webkit-transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  will-change: transform;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.no-js .nav ul ul {
  max-height: 0;
  overflow: hidden;
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
}
.no-js .nav li:hover > ul {
  max-height: 1000px;
}
@media screen and (min-width: 992px) {
  .no-js .nav ul ul ul {
    margin-left: 100%;
  }
  .no-js .nav li:hover > ul {
    overflow: visible;
  }
}
.js header.opened {
  -webkit-transform: translateX(250px);
  -ms-transform: translateX(250px);
  transform: translateX(250px);
}
.js .nav ul ul {
  display: none;
}
.js .nav ul ul ul {
  position: relative;
}
.js .nav .arrow {
  display: inline-block;
  padding: 0 3px;
}
@media screen and (max-width: 992px) {
  .js .nav .arrow {
    float: right;
    background: #444;
    padding: 1px 10px;
    margin-left: 5px;
  }
  .js .nav .arrow,
  .js .nav .arrow div {
    -webkit-transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
    transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
    will-change: transform;
  }
  .js .nav .arrow:hover {
    background-color: #333;
  }
  .js .nav .arrow.active div {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

/*Downloaded from https://www.codeseek.co/VPenkov/a-pen-by-vergil-penkov-HshuB */
// Responsive navs
// See the markup for exmple structure
(function($){ 

  // Toggle the menu on mobile devices
  $('.nav .menu-toggle').click(function(event) {
    event.preventDefault();
    $(this).next('ul').toggleClass('opened');
    $(this).toggleClass('active');
    $('header').toggleClass('opened');
    $('.nav ul ul').slideUp();
  });

  var navLinks = $('.nav > ul').find('a');

  // Insert arrows for submenus
  navLinks.each(function() {
    var submenu = $(this).next('ul');
    if (submenu.length) {
      $(this).append('<span class="arrow"><div>&#9662;</div></span>')
    }
  });

  // Toggle the submenus on desktop versions
  $('.nav .arrow').click(function(e) {
    e.preventDefault();
    $(this).parent().next('ul').stop().slideToggle(100);
    $(this).toggleClass('active');
  });

})(jQuery);

Comments