Sliding Menu

In this example below you will see how to do a Sliding Menu with some HTML / CSS and Javascript

Simple sliding menu example.Not yet responsive.Forked from Kunal Bhat's Pen Sliding Menu.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Sliding Menu</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300'>

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

  
</head>

<body>

  <main class='main-content' id='main-content' role='main'>
  <article class='article'>
    <h1>Title</h1>

    <h3>Subtitle</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
      ornare, lacus in gravida viverra, neque diam dapibus augue, et
      egestas purus lectus mollis augue.
    </p>
    <p>
      Integer quis diam enim. Donec eget metus sed tellus fermentum
      sagittis vel et nunc. Proin quis justo tincidunt, volutpat velit non,
      congue augue. Nunc sodales urna fermentum purus interdum pretium. Sed
      scelerisque facilisis hendrerit.
    </p>
    <p>
      Curabitur consectetur tortor a lacinia hendrerit. Mauris vitae
      adipiscing orci, a suscipit nisi. Quisque ut ligula magna.  Vivamus
      lorem nunc, viverra vel faucibus elementum, facilisis varius risus.
      Proin tempor felis urna, ut elementum sapien sagittis malesuada.
    </p>
  </article>

  <button class='menu-button js-toggle-menu-button'>
    <svg class="svg replaced-svg" enable-background="new 0 0 25 23.256" viewBox="0 0 25 23.256" height="23.256px" width="25px" y="0px" x="0px">
      <path d="M0.603,1.374C1.359,0.861,2.297,0.33,3.42,0.255c0.522-0.035,1.072,0.032,1.585,0  c0.264-0.016,0.694,0.086,0.97,0.075c0.29-0.012,0.591-0.127,0.881-0.149c1.025-0.079,2.103-0.014,3.171,0  c0.922,0.01,1.878,0.149,2.817,0.149c0.563,0,1.116-0.123,1.675-0.149c2.378-0.115,4.914,0.073,7.222-0.075  c0.142-0.01,0.15-0.059,0.266-0.075c1.15-0.16,1.677,0.341,2.378,0.822c0.093,0.398,0.289,0.853,0.438,1.418  c0.099,0.366,0.107,0.641,0,1.12c-0.04,0.187-0.098,0.46-0.175,0.598c-0.031,0.055-0.619,0.628-0.704,0.671  c-0.188,0.092-0.484,0.088-0.793,0.149c-0.262,0.052-0.526,0.129-0.794,0.149c-0.125,0.01-0.258-0.086-0.439-0.074  c-0.046,0.002-0.207,0.075-0.353,0.074c-0.284-0.001-0.597-0.084-0.88-0.074c-0.404,0.012-0.845,0.119-1.323,0.149  c-0.352,0.021-0.771,0.064-1.144,0.074c-0.933,0.025-1.907-0.101-2.731-0.074c-0.614,0.02-1.252,0.217-1.85,0.225  c-0.438,0.005-0.886-0.072-1.32-0.075c-0.413-0.004-0.826,0.071-1.233,0.075c-0.822,0.005-1.657-0.086-2.467-0.075  c-1.626,0.02-3.42,0.016-4.932,0.223C3.493,5.433,3.228,5.485,3.067,5.48C2.852,5.475,2.469,5.313,2.1,5.257  c-0.476-0.073-0.726,0.005-1.058-0.15C0.66,4.929,0.444,4.482,0.25,3.988C0.188,3.83,0.091,3.66,0.073,3.539  C0.055,3.416,0.169,3.412,0.162,3.316c-0.006-0.063-0.094-0.073-0.089-0.15C0.113,2.52,0.592,1.882,0.603,1.374z" clip-rule="evenodd" fill-rule="evenodd"></path>
      <path d="M1.395,9.152c1.005-0.044,1.983,0.059,2.994,0c0.506-0.03,0.999-0.143,1.498-0.159  c1.001-0.034,2.229-0.081,3.171-0.081c0.253,0,0.83,0.087,1.321,0.081c0.085-0.002,0.189-0.091,0.353-0.081  c0.045,0.003,0.203,0.084,0.352,0.081c1.161-0.03,2.367-0.125,3.524-0.16c1.137-0.035,2.22,0.005,3.171-0.239  c0.275-0.073,1.388-0.083,1.938-0.081c0.579,0.003,1.201,0.059,1.762,0.081c1.104,0.042,2.259,0.09,3.082,0.559  c0.31,0.292,0.446,0.989,0.44,1.757c-0.014,1.542-0.071,2.209-1.585,2.556c-0.276,0.063-0.566,0.025-0.882,0.08  c-0.243,0.041-0.458,0.204-0.704,0.239c-0.498,0.07-1.154,0.028-1.674,0c-0.105-0.005-0.402,0.08-0.439,0.08  c-0.574,0.002-1-0.061-1.586,0.08c-0.465,0.111-0.921-0.015-1.585,0c-2.187,0.045-5.385,0.305-7.663,0.318  c-1.114,0.007-2.397-0.014-3.611-0.079c-1.158-0.063-2.847,0.174-3.876-0.319c-0.305-0.146-0.964-0.739-1.059-0.959  c-0.098-0.232-0.063-0.713-0.086-1.038c-0.076-1.017-0.027-1.335,0.439-1.997C0.882,9.598,1.17,9.351,1.395,9.152z" clip-rule="evenodd" fill-rule="evenodd"></path>
      <path d="M11.171,17.531c-0.006,0,0.022-0.087,0.087-0.08  c0.812,0.073,1.592,0.066,2.379,0.161c0.171,0.019,0.242,0.073,0.354,0.078c0.131,0.009,0.312-0.085,0.439-0.078  c0.086,0.002,0.193,0.08,0.353,0.078c1.148-0.009,2.339-0.229,3.523-0.239c0.375-0.004,0.705,0.076,1.056,0.08  c0.697,0.006,1.312-0.125,2.027,0c0.082,0.015,0.133,0.095,0.265,0.081c0.066-0.01,0.091-0.093,0.176-0.081  c0.156,0.021,0.269,0.129,0.439,0.159c0.191,0.035,0.396-0.038,0.616,0c0.16,0.029,0.254,0.12,0.441,0.16  c0.197,0.04,0.376,0.026,0.528,0.08c0.893,0.312,0.783,0.691,1.057,1.677c0.256,0.911-0.32,2.442-0.968,2.794  c-0.12,0.065-0.339,0.097-0.704,0.16c-0.199,0.034-0.436,0.036-0.706,0.079c-0.557,0.09-1.036,0.292-1.32,0.32  c-0.264,0.024-0.534-0.08-0.881-0.08c-0.223,0-0.465,0.078-0.704,0.08c-0.482,0.003-1.039-0.07-1.586-0.08  c-1.124-0.021-2.364,0.14-3.612,0.159c-1.788,0.03-3.582-0.033-5.197,0c-1.546,0.035-2.771,0.007-4.228,0.08  c-0.818,0.042-1.841,0.134-2.555,0c-0.34-0.063-1.014-0.449-1.144-0.559c-0.073-0.061-0.076-0.205-0.177-0.318  c-0.154-0.178-0.296-0.194-0.44-0.56c-0.045-0.115-0.057-0.179-0.087-0.24c-0.266-0.519-0.187-1.896,0.087-2.476  c0.09-0.188,0.271-0.319,0.44-0.479c0.166-0.156,0.346-0.363,0.44-0.399c0.206-0.078,0.5-0.028,0.88-0.08  c0.234-0.031,0.483-0.141,0.706-0.159c0.59-0.05,1.168,0.017,1.673-0.081c0.733-0.139,1.747,0.079,2.644,0  c0.081-0.005,0.134-0.084,0.263-0.079C7.814,17.693,7.87,17.786,8,17.77c0.381-0.044,0.755-0.204,1.145-0.238  C9.792,17.475,10.455,17.537,11.171,17.531z" clip-rule="evenodd" fill-rule="evenodd"></path>
    </svg>
  </button>
</main>
<nav class='navigation js-menu' id='navigation' role='navigation'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</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/alexaguilar/sliding-menu-GoJGdq */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  font-family: 'Open Sans';
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.main-content, .navigation {
  padding: 60px;
  position: absolute;
}

.main-content {
  background: #fff;
  height: 100%;
  left: 0;
  overflow: hidden;
  width: 100%;
  z-index: 100;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
  -ms-transition: left 0.4s;
  transition: left 0.4s;
}
.main-content.reveal {
  left: -25%;
}
.main-content .article {
  float: left;
  width: 60%;
}

.navigation {
  background: #ff3366;
  height: 100%;
  right: -15%;
  text-align: center;
  top: 0;
  width: 25%;
  z-index: 0;
  -webkit-transition: right 0.4s;
  -moz-transition: right 0.4s;
  -ms-transition: right 0.4s;
  transition: right 0.4s;
}
.navigation.reveal {
  right: 0;
}
.navigation a {
  color: #fff;
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-button {
  background: transparent;
  border: none;
  cursor: pointer;
  float: right;
  outline: none;
}
.menu-button path {
  fill: #ff3366;
}

h1, h3 {
  color: #ff3366;
}

h1 {
  font-size: 3em;
  margin: 0;
}

h3 {
  font-size: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/*Downloaded from https://www.codeseek.co/alexaguilar/sliding-menu-GoJGdq */
$('.js-toggle-menu-button').on('click', function(event) {
  event.preventDefault();

  $('#main-content').toggleClass('reveal');
  $('#navigation').toggleClass('reveal');
});

$('body').keyup(function(event) {
  event.preventDefault();

  var code = event.keyCode || event.which;

  // Hit the 'Tab' key to trigger the menu
  if (code == '9') {
    $('.js-toggle-menu-button').trigger('click');
  }
 });

Comments