Боковое меню как на YouTube для uCoz
Сегодня мы посмотрим на то, как можно создать боковое меню как на YouTube для своего сайта. Идея заключается в раскрытии меню после нажатия на специальную иконку.

Установка


HTML


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

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://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;}

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>

Вот и всё. Надеюсь, менюшка вам понравится и пригодится.

Всего комментариев: (0)

_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Классическая форма входа для сайтов с uID авторизацией
Классическая форма входа для сайтов
Изменение скролла
Изменение скролла
BERNIER TYPE FAMILY
BERNIER TYPE FAMILY
150 векторных иконок
150 векторных иконок
Игра Kolor
Игра Kolor
Материал просмотрен как на YouTube by webo4ka.ru
Материал просмотрен как на YouTube