Menu Geser

Menu Geser

by Ahmad Najiullah

HTML

<input type='checkbox' id='sideToggle1' hidden>
<input type='checkbox' id='sideToggle2' hidden>
<aside class='sideMenu left'>
  <h2>Side Menu</h2>
  <ul>
    <li><a href='#' data-value='item 1'>item 1</a></li>
    <li><a href='#' data-value='very long item 2'>very long item 2</a></li>
    <li><a href='#' data-value='long item 3'>long item 3</a></li>
    <li><a href='#' data-value='item 4'>item 4</a></li>
  </ul>
</aside>
<aside class='sideMenu right'>
  <h2>Side Menu</h2>
  <ul>
    <li><a href='#' data-value='item 1'>item 1</a></li>
    <li><a href='#' data-value='very long item 2'>very long item 2</a></li>
    <li><a href='#' data-value='long item 3'>long item 3</a></li>
    <li><a href='#' data-value='item 4'>item 4</a></li>
  </ul>
</aside>
<div id='contentWrap'>
    <label class='menuBtn floatr' for='sideToggle2'>&minus;</label>
    <label class='menuBtn' for='sideToggle1'>&minus;</label>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat sodales erat, nec fermentum risus interdum vitae. Suspendisse volutpat lectus id leo volutpat pulvinar. Aliquam sed mauris augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ligula purus, tincidunt vel aliquam ac, commodo sit amet lacus. Sed sapien arcu, venenatis eu tempus ac, egestas id nisl. In rhoncus vehicula velit, id pretium dolor tincidunt id. Sed fringilla eleifend felis, eget malesuada neque consectetur quis. Sed consequat, enim vel rhoncus tempor, arcu metus rhoncus enim, sit amet blandit velit elit nec leo. Suspendisse blandit felis in mi volutpat a tincidunt lectus tempor. Curabitur auctor lacinia varius. Proin condimentum dui eget arcu sagittis vitae sagittis quam porta. Etiam eleifend dui quis lorem volutpat rhoncus. Praesent nec enim et mauris scelerisque eleifend.
    </p><p>
Pellentesque tristique tincidunt odio, ac interdum velit suscipit ut. Praesent nec odio id sem commodo iaculis. Donec nisi nisl, rutrum at auctor sit amet,...

CSS

/* Reset */
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

p {
  padding: 10px 0;
}

body {
  height: 100%;
  font-family: arial;
  position: relative;
  background: #222222;
}

.floatl {
  float: left;
}

.floatr {
  float: right;
}

/* Side menu */
.sideMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 250px;
  background: #222222;
  color: #FFF;
  padding: 20px;
  text-transform: uppercase;
}
.sideMenu.right {
  left: auto;
  right: 0;
}
.sideMenu > ul {
  padding: 0;
  list-style: none;
  margin: 20px 0;
}
.sideMenu > ul > li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.sideMenu > ul > li a {
  color: #CCC;
  text-decoration: none;
  display: block;
  line-height: 3.2;
  font-size: 0.8em;
  font-weight: bold;
  margin: 0 -10px;
  padding: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.4s cubic-bezier(0.335, 0.815, 0.47, 1);
}
.sideMenu > ul > li a:hover {
  color: #222222;
  text-indent: 250px;
}
.sideMenu > ul > li a::before {
  content: attr(data-value);
  color: #FFF;
  float: left;
  width: 250px;
  margin-left: -250px;
}

/* Toggle button */
.menuBtn {
  display: inline-block;
  background: #f1103a;
  border-radius: 50px;
  color: #FFF;
  cursor: pointer;
  display: block;
  font: bold 1.7em/36px Courier New;
  width: 36px;
  height: 36px;
  text-align: center;
  text-shadow: 0 -5px, 0 5px;
  transition: 0.15s;
}
.menuBtn:hover {
  background: #222;
}

/* Content handing */
#contentWrap {
  min-height: 100%;
  position: relative;
  z-index: 1;
  background: #FFF;
  padding: 20px;
  transition: 0.4s cubic-bezier(0.335, 0.815, 0.47, 1);
}
#sideToggle1:checked ~ #contentWrap {
  -webkit-transform: translatex(250px);
  border-radius: 8px;
  transform: translatex(250px);
}
#sideToggle2:checked ~ #contentWrap {
  -webkit-transform: translatex(-250px);
  transform: translatex(-250px);
 ...