<nav id="dr-menu" class="dr-menu">
  <div class="dr-trigger"><span class="dr-icon"></span></div>
  <ul>
  <li><a class="dr-icon" href="#">Блог</a></li>
  <li><a class="dr-icon" href="#">Скрипты для uCoz</a></li>
  <li><a class="dr-icon" href="#">Шаблоны для uCoz</a></li>
  <li><a class="dr-icon" href="#">Дизайн сайта</a></li>
  </ul>
</nav>

.dr-menu { width: 100%; max-width: 400px; min-width: 400px; position: relative; line-height: 2.5; color: #fff;}
.dr-menu > div {cursor: pointer;position: absolute;width: 100%;z-index: 100;}
.dr-menu > div .dr-icon {top: 0;left: 0;position: absolute;font-size: 150%;line-height: 1.6;padding: 0 10px;transition: all 0.4s ease;background: url(http://wonders.do.am/menu_p.png);width: 32px;height: 32px;}
.dr-menu.dr-menu-open > div .dr-icon {color: #74b7f7;left: 100%;transform: translateX(-100%);}
.dr-menu > div .dr-icon:after {content: "";position: absolute;top: 4px;left: -73%; opacity: 0;background: url(http://wonders.do.am/close.png);width: 24px;height: 24px;display: block;}
.dr-menu.dr-menu-open > div .dr-icon:after {opacity: 1;}
.dr-menu > div {padding-left: 3em;position: relative;display: block;color: #fff;font-size: 0.9em;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;line-height: 2.75;transition: all 0.2s ease-in;}
.dr-menu.dr-menu-open > div .dr-label {transform: translateY(-90%);}
.dr-menu ul {padding: 0;margin: 0 3em 0 0;list-style: none;opacity: 0;position: relative;z-index: 0;pointer-events: none;transition: opacity 0s linear 205ms;}
.dr-menu.dr-menu-open ul {opacity: 1;z-index: 200;pointer-events: auto;transition: opacity 0s linear 0s;}
.dr-menu ul li {display: block;opacity: 0;transition: opacity 0.3s ease;}
.dr-menu.dr-menu-open ul li {opacity: 1;}
.dr-menu.dr-menu-open ul li:nth-child(2) {transition-delay: 35ms;}
.dr-menu.dr-menu-open ul li:nth-child(3) {transition-delay: 70ms;}
.dr-menu.dr-menu-open ul li:nth-child(4) {transition-delay: 105ms;}
.dr-menu.dr-menu-open ul li:nth-child(5) {transition-delay: 140ms;}
.dr-menu.dr-menu-open ul li:nth-child(6) {transition-delay: 175ms;}
.dr-menu.dr-menu-open ul li:nth-child(7) {transition-delay: 205ms;}
.dr-menu ul li a {display: inline-block;padding: 0 20px;color: #fff;font-size: 16px;;}
.dr-menu ul li a:hover {color: #60a773;}
.dr-menu ul .dr-icon:before {margin-right: 15px;}

<script type="text/javascript">
  var YTMenu = (function() {
function init() {
  [].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {
var trigger = el.querySelector( 'div.dr-trigger' ),
icon = trigger.querySelector( 'span.dr-icon' ),
open = false;
trigger.addEventListener( 'click', function( event ) {
if( !open ) {
el.className += ' dr-menu-open';
open = true;
}
}, false );
icon.addEventListener( 'click', function( event ) {
if( open ) {
event.stopPropagation();
open = false;
el.className = el.className.replace(/\bdr-menu-open\b/,'');
return false;}}, false );} );}
init();})();
  </script>