Боковое меню как на 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$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

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

AJAX ОКНА V.1.2 BY MR.WINS
AJAX ОКНА V.1.2 BY MR.WINS
Вид материалов как на Kanavas
Вид материалов как на Kanavas
Colors - супер быстрый генератор цветовых схем
Colors - супер быстрый генератор цв
Отправка ЛС в ajax окне
Отправка ЛС в ajax окне
300 Flat иконок
300 Flat иконок
Функциональный слайдер с автопрокруткой
Функциональный слайдер с автопрокру