Make Menu Pinggir or Gigir use CSS 3

Berawal dari membaca artikel Off Canvas Menu with CSS :target dimana membicarakan sebuah konsep menu tersembunyi (CSS Panel Menu) yang dibuat memakai property CSS :target Demo jadi seperti ini cssPanelMenu. Kalau mau melihat menu pinggir versi jQuery dapat sobat tengok Facebook style Aside. Jadi inti tutorial sekarang membuat menu pinggir/gigir tersembunyi menggunakan atribut CSS 3.Masukan ramuan CSS brkt tepat sebelum/diatas kode </b:skin>

.menGir {
  display: none;
}
.main-men {
    position: fixed;
    top: 0px;
    left: 0;
    width: 0px;
    height: 100%;
    background: rgb(59, 59, 59);
    overflow: hidden;
    transition: width 0.3s ease 0s;
}  
.main-men a {
    display: block;
    background: #333;
    border-bottom: 1px solid #222;
    color: #fff;
    padding: 5px 0 5px 10px;
}
#menPing:checked + #main-nav {
  width: 100px;
}

Cari </body> masukin markup HTML sebelum/diatas kode itu. Kalau pusing bisa juga Add a Gadget ► HTML/Javascript.

<input type="checkbox" class="menGir" id="menPing" />
<nav class="main-men" id="main-nav">
<a href="LINK">Title1</a>
<a href="LINK">Title2</a>
<a href="LINK">Title3</a>
<a href="LINK">Title4</a>
<a href="LINK">Title5</a>
<a href="LINK">Title...</a>
</nav>
<label for="menPing" style="position: fixed;top: 0;right: 5px">&#9776;</label>
Happy menu \m/