A Pen by John Perry

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  John Perry</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <main>
  <header>
    <nav>
      <ul>
        <li><div>Item1</div>
          <ul>
            <li><div>Item1-1</div>
              <ul id="superitem">
                <li><div>Item1-1-1</div></li>
                <li><div>Item1-1-2</div></li>
                <li><div>Item1-1-3</div></li>
                <li><div>Item1-1-4</div></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
  
  <button id="button">Button</button>


</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/jp26jp/a-pen-by-john-perry-MbeQZz */
*,
*:before,
*:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body {
  background: #fff;
}

nav {
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  width: 300px;
  background-color: #ddd;
  top: 0;
  left: 0;
  height: 100%;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  list-style: none;
}
nav .menu-item {
  background: #ddd;
  text-decoration: none;
  color: #333;
  display: inline-block;
  width: 100%;
  padding: 10px 20px;
  cursor: pointer;
}
nav .submenu-container {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transition: transform, -webkit-transform .5s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
nav .submenu-container:not(.open) {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
nav .submenu-container.open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.submenu-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .2;
}

#button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 50px;
}


/*Downloaded from https://www.codeseek.co/jp26jp/a-pen-by-john-perry-MbeQZz */
$('nav li div').addClass('menu-item');

$('nav ul')
  .find('ul').each(function(idx){
    var calcLayer = idx * 10;
    $(this).css('z-index', calcLayer);
  });


$('nav ul ul').addClass('submenu-container')
  .prepend('<li><span class="back menu-item">Back</span></li>')
  .siblings('div').addClass('submenu-toggle')
  .before('<div class="submenu-overlay"></div>');


$('.submenu-toggle')
  .on('mouseenter', function(){
    $(this).next().css('will-change', 'transform');
  })
  .on('mouseleave', function(){
    $(this).next().css('will-change', 'auto');
  })
  .click(function(e){
    e.preventDefault();
    var prevItem = $(this).prev();
    var nextItem = $(this).next();

    $(prevItem).fadeIn('swing');
    $(nextItem).addClass('open').css('opacity','1');
  }); 


$('.back').click(function(){
  $(this).closest('ul')
    .removeClass('open')
    .siblings('.submenu-overlay').fadeOut('swing');
});

Comments