Скрытое боковое меню как на 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>  В стилях, есть размеры кнопки, их регулируем под каждый сайт | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
|
| |
