Menu show hide Menggunakan CSS3 transition

Membuat Menu seperti tampilan blog PHP5-CSS3-JQUERY 
sumber dari blogger Dedy-suna
demo bisa anda lihat pada blog saya
letakan kode diatas ]]></b:skin>

#DS-menu {position: fixed !important; bottom: 0px; left:5px !important;-webkit-transition: bottom 300ms ease-out 0;-moz-transition: bottom 300ms ease-out 0;-o-transition: bottom 300ms ease-out 0;transition: bottom 300ms ease-out 0;font:Helvetica, Arial,  Helvetica, Arial;font-size: 12px !important;font-weight: normal !important;letter-spacing: normal !important;line-height: normal !important;list-style-type: none !important;text-align: left !important;text-indent: 0 !important;text-transform: none !important;visibility: visible !important;white-space: nowrap !important;word-spacing: normal !important;letter-spacing: normal !important;margin: 0 !important;padding: 0 !important;width: auto !important;height: auto !important;min-height: 0 !important;min-width: 0 !important;} #DS-menu ul{background-color:#272727;border:3px double #3d3d3d;margin: 5px !important;padding: 2px !important;list-style-type: none;opacity:none;} #DS-menu a{margin: 0; padding: 0;text-decoration: none;} #DS-menu li{position: relative;height: auto;margin-bottom: 2px !important;margin-left: -220px;transition-property: margin;transition-duration: .2s;transition-timing-function: easeInCirc;transform: translate3d(0,0,0);-webkit-transition-property: margin, opacity;-webkit-transition-duration: .2s;-webkit-transition-timing-function: easeInCirc;-webkit-transform: translate3d(0,0,0);} #DS-menu span{width: 100px;z-index: 1 !important;top: 6px; left: 5px;display: inline-block;padding: 7px !important;white-space: nowrap;background-color:#272727;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 12px;font-weight: bold;color: #F5F5F5 !important;text-align: left !important;} #DS-menu span:hover {background-color:rgba(0,0,0,.2);} #DS-click:checked ~ label::before { content: ' '; }#DS-click ~ label::before { content: '  '; }#DS-click:checked ~ label:before { content: ' '; }#DS-click ~ label:before { content: '  '; } #DS-click[type="checkbox"] { margin-left: -200px; }#DS-click[type="checkbox"]:checked + ul > li { margin-left: 0px !important; }#DS-menu.show li { margin-left: 0px !important; } /* Menu Navigasi Show Hide DS-Blog */#DS-click[type="checkbox"].show + ul > li { margin-left: 0px;  } #DS-menu label{position: relative !important;left: 7px;overflow:hidden;display: inline-block;z-index: 999;width: 37px; height: 35px;margin: 0 !important;
border-radius:4px;padding: 0 !important;line-height: 35px !important;cursor: pointer !important;user-select: none;background-image: url('http://i1242.photobucket.com/albums/gg536/dhedidik/ds-menu_zps74c79a3e.png') !important;background-position: 0 0px !important;} #DS-menu label:active{bottom: -1px !important;}

kemudian Letakan kode dibawah ini tepat diatas kode </body> :

 <div id="DS-menu"><input type="checkbox" id="DS-click" name="DS-click" /><ul><li style="transition-delay: 0; -webkit-transition-delay:0;"><a href="/"><span>Beranda</span></a></li>                  
<li style="transition-delay: .1s; -webkit-transition-delay:.1s;"><a href="/"><span>Blogger</span></a></li>                  
<li style="transition-delay: .2s; -webkit-transition-delay: .2s;"><a href="/"><span>Tutorial</span></a></li>                  
<li style="transition-delay: .3s; -webkit-transition-delay: .3s;"><a href="/"><span>Komputer</span></a></li>              
</ul><label for="DS-click" onclick=""></label>        
</div>