» »

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


Скрытое боковое меню как на 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>




В стилях, есть размеры кнопки, их регулируем под каждый сайт
12.10.2015 Просмотров: 673 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
Brung
Brung 12.10.2015 16:191
0
Интересно, вы посмотрели DEMO а как же нам в этом случай, может сделаете.
Kosten
Kosten 12.10.2015 16:232
0
Brung, демонстрацию раньше ставил, но тут еще Javascript, с ним еще не разу не ставил.
Brung
Brung 12.10.2015 16:353
0
Если вы делали уже Demo, то просто в сам файл поставите JavaScript и все.
Kosten
Kosten 12.10.2015 16:394
0
Brung, надо попробовать, все же с демонстрацией как лучше.
Kosten
Kosten 12.10.2015 17:205
0
Brung, сделал, можете смотреть, как оно по функционалу.
Brung
Brung 12.10.2015 17:246
0
Kosten, вижу, не чего так, креативность полная, но не понимаю, при чем здесь медио сайт.
Kosten
Kosten 12.10.2015 17:307
0
Kosten, тут точно не скажу, возможно когда то стояло. Как уже писал, когда установите, у вас могут появиться 2 кнопки или вообще не корректно смотреться будет. Все настраиваться в стилях, здесь все настроил, как у вас будет, возможно нормально, но там под каждую ссылку идет размер, как в ширину и в длину и не трудно под себя сделать..
Brung
Brung 12.10.2015 23:058
0
А это интересно не адаптация или сами написали.
Canon
Canon 13.10.2015 20:549
0
Поставил на один сайт, тот который предлагает система, так нелепо смотрится, что сразу убрал. Эта навигация, только под дизайнерские сайты.
avatar