вРазные полезности

Скрытое боковое меню как на YouTube для uCoz

 
Это точно навигация не подойдет к простым сайтам, так как по своему дизайну и функциям Скрытое боковое меню как на YouTube для uCoz по своем стилям и характеристики, кардинально отличается. Можно представить его к примеру на магазин онлайн ресурсе как портфолио или сайт визитка. Да, сейчас очень много площадок с оригинальным дизайном, а главное функциональность там совершенно другая и вот здесь можно присмотреться и попробовать установить, как будет смотреться.

Ваше место:

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

CSS:

Код
.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://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/menu_p.png);width: 12px;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: 8px;left: -73%; opacity: 0;background: url(http://zornet.ru/ZORNET/Fail/sagte/arrow.png);width: 14px;height: 15px;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;

JavaScript

Код
<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>

В стилях, есть размеры кнопки, их регулируем под каждый сайт

источник: zornet.ru

Похожие посты