Make Navigation Menu with Overlay Effect use CSS3

Sedikit males juga sebenarnya memosting tentang menu Sudah kebanyakan yg mosting :d Karena menu yg satu ini memiliki sentuhan gaya sedikit unik, maka terpaksa deh Koben posting tutorial menu. Menu kali ini tidak akan terlihat sebelum di klik. Kalaupun muncul, si menu akan menutupi seluruh body template! Trick membuat menu dengan efek overlay full memakai atribut CSS3. Tricky toogle button teranyar full pakai CSS3. We are talking about pure css navigation with overlay effect b-)
DEMO

codepen.io/boxabrain/full/sdzcf

Koben hanya melakukan perubahan posisi toggle input and optimasi kode yg tidak dibutuhkan :d Bagi user penggila cross browser, variabel kode CSS3 fix sendiri yeee :p
MarkUp HTML<div id="sdzcf">
<input type="checkbox" id="boxabrain" />
<label id="toggle-sdzcf" for="boxabrain">&#8801;</label>
<div class="ktk">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>

#sdzcf .ktk {
 top: 0px;
 left: 0px;
 position: fixed;
 opacity: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 overflow: hidden;
 text-align: center;
 background: rgba(0,0,0,0.8);
 transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out; 
 -webkit-transition: all 0.3s ease-in-out; 
}
#sdzcf ul {
 top: 0;
 position: relative;
 transform: scale(2);
 -webkit-transform: scale(2);
 transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out; 
 -webkit-transition: all 0.3s ease-in-out; 
}
#sdzcf li { 
 display: inline-block; 
 margin: 10px;
}
#sdzcf li a {
 color: #fff;
 padding: 9px;
 font-size: 15px;
 border-radius: 3px;
 text-decoration: none;
 transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out; 
 -webkit-transition: all 0.2s ease-in-out; 
}
#sdzcf li a:hover {border: 1px solid #d00;}
#sdzcf li a { 
 font-size: 20px;
}
#toggle-sdzcf {
 left: 5px;
 bottom: 5px;
 position: fixed;
 color: #000;
 width: 30px;
 height: 30px;
 z-index: 600;
 display: block;
 cursor: pointer;
 font-size: 30px;
 font-weight: bold;
 line-height: 30px;
 text-align: center;
 border-radius: 5px;
 background: rgba(0,0,0,0.2);
}
#boxabrain { display: none; }
#boxabrain:checked ~ .ktk { 
 opacity: 1;
 z-index: 400;
}
#boxabrain:checked ~ .ktk ul {
 transform: scale(1);
 -o-transform: scale(1);
 -webkit-transform: scale(1);
}
#boxabrain:checked ~ #toggle-sdzcf { 
 background: #fff; 
 color: red;
}

Bila mau merubah posisi keberadaan tombol cheked, perhatikan saja kode #toggle-sdzcf rubahlah variable left: 5px; & bottom: 5px; Demo pada blog ini perhatikan pojok kiri bawah!

≡

• Home
• (.)(.)
• CSS3
• Contacts

Bonus link
jsfiddle.net/andresilich/g5jEr/
codepen.io/leejan/pen/Idqbt
codepen.io/aptary/pen/uwAHB
codepen.io/trezy/pen/akfyg
codepen.io/berdejitendra/pen/Afwle
jsdo.it/edo_m18/9Whu
www.bestfreewebresources.com/2013/06/css3-tutorials-create-buttons.html
tympanus.net/Development/CreativeButtons