Полноэкранное меню навигации для сайта на CSS3
Давно я не писал про красивую навигацию на сайте и как ее реализовать, сегодня видать тот самый день, когда сошлись звезды и пора выкатить интересный урок о навигационном меню для сайта. Не буду скрывать, я уже не раз писал уйму уроков о чем-то похожем, но каждый раз в голову приходят разные мысли которыми хочется поделиться с читателями. Идея навигации не новая, ее часто применяют на сайте в виде дополнительного меню, которые прикручено где-то в низу сайта и доносит до посетителя дополнительную информацию.
Наше меню будет нечто похоже, мы создадим гамбургер кнопку, которая будет находиться постоянно в прилепленном состоянии в низу страницы в левом углу. При нажатии на нее буде моментально разворачиваться полноэкранная навигация, обратите внимания, что скорость ее работы будет составлять 60FPS, что добавляет общей скорости к сайту. Смотрите также бесплатные и не только шаблоны для вашего сайта:
Шаг 1. HTML
Как обычно, первый шаг будет с создания разметки, если вы внимательно читали ранее уроки, то знаете, что перед этим стоит подключить к вашей страницы также дополнительные скрипты которые необходимы для работы сайта. Разметку можно поделить на две части, первая это создание структуры кнопки:
1 2 3 4 5 6 |
<div id="nav-bg" class="btn"></div> <div id="toggle-btn" class="btn"> <span></span> <span></span> <span></span> </div> |
Мы присвоили к кнопкам класс btn, позже в стилях мы его обыграем и придадим стилей, вторая часть разметки будет создание самого содержания кнопки, то есть то, что мы увидим при нажатии:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wrapper"> <nav> <ul> <li><a class="link" href="#0">Главная</a></li> <li><a class="link" href="#0">О нас</a></li> <li><a class="link" href="#0">Контакты</a></li> <li><a class="link" href="#0">Шаблоны</a></li> <li><a class="link" href="#0">Еще</a></li> </ul> </nav> </div> |
Здесь мы также добавили классы для ссылки, так как при наведении курсора на ссылку в меню, у нас будет небольшая анимация с выделением, чтобы подчеркнуть активный пункт меню.
Шаг 2. CSS
Теперь перейдем к стилям, для начала нам необходимо залить фон полноэкранной навигации и установить трансформацию, по умолчанию фон будет у нас белый:
1 2 3 4 5 6 7 8 9 10 11 |
#nav-bg { -webkit-transform-origin: center center; transform-origin: center center; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale)); transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale)); will-change: transform; pointer-events: none; } |
Затем нужно не упасть лицом в грязь перед посетителями и сделать красивую кнопку навигации, которая будет у нас круглая с тригерами:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
.btn { position: fixed; height: calc(var(--btn-size)*1px); width: calc(var(--btn-size)*1px); bottom: calc((var(--offset-value))*1px); left: calc(var(--offset-value)*1px); border-radius: 50%; background: #fafafa; cursor: pointer; margin: 0; padding: 0 15px; border: none; z-index: 100; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } #toggle-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--green); transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #toggle-btn span { position: relative; width: 100%; } #toggle-btn span { margin-top: -4px; } #toggle-btn span + span { margin-top: 8px; } #toggle-btn span:before, #toggle-btn span:after { content: ''; position: absolute; top: 0; background: currentColor; opacity: .8; height: 100%; width: 50%; height: 4px; transition: .25s cubic-bezier(.6,0,.3,1); -webkit-transform-origin: center center; transform-origin: center center; } #toggle-btn span:before { left: 0; border-radius: 3px 0 0 3px; } #toggle-btn span:after { right: 0; border-radius: 0 3px 3px 0; } #toggle-btn.shown span:nth-of-type(1):before { -webkit-transform: translate3d(3px, 3.5px, 0) rotate(45deg); transform: translate3d(3px, 3.5px, 0) rotate(45deg); } #toggle-btn.shown span:nth-of-type(1):after { -webkit-transform: translate3d(-3px, 3.5px, 0) rotate(-45deg); transform: translate3d(-3px, 3.5px, 0) rotate(-45deg); } #toggle-btn.shown span:nth-of-type(3):before { -webkit-transform: translate3d(3px, -3.5px, 0) rotate(-45deg); transform: translate3d(3px, -3.5px, 0) rotate(-45deg); } #toggle-btn.shown span:nth-of-type(3):after { -webkit-transform: translate3d(-3px, -3.5px, 0) rotate(45deg); transform: translate3d(-3px, -3.5px, 0) rotate(45deg); } #toggle-btn.shown span:nth-of-type(2):before, #toggle-btn.shown span:nth-of-type(2):after { opacity: 0.0001; } #toggle-btn.shown span:nth-of-type(2):before { -webkit-transform: translateX(-200%); transform: translateX(-200%); } #toggle-btn.shown span:nth-of-type(2):after { -webkit-transform: translateX(200%); transform: translateX(200%); } #toggle-btn.shown:before { -webkit-transform: scale(.6); transform: scale(.6); transition: .2s; } #toggle-btn:before { content: ''; transition: .2s .2s; position: absolute; top: 3px; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.1); border-radius: inherit; -webkit-filter: blur(5px); filter: blur(5px); z-index: -2; } #toggle-btn:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; background: #fafafa; z-index: -1; } |
Cледующим шагом будет стилизация навигации которая будет отображаться при развертывании меню, делаем мы это следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
nav { width: 100%; height: 100%; background: transparent; position: fixed; top: 0; left: 0; overflow: hidden; display: flex; z-index: 200; pointer-events: none; } nav ul { margin: auto; pointer-events: auto; text-align: center; } nav li { font-size: 30px; color: #212121; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translate(-20px,20px) scale(.9); transform: translate(-20px,20px) scale(.9); transition: 0s; opacity: 0.0001; visibility: hidden; will-change: transform; } nav li + li { margin-top: 30px; } #toggle-btn.shown ~ .wrapper nav li { -webkit-transform: none; transform: none; opacity: 1; visibility: visible; transition: .35s cubic-bezier(.4,2.08,.55,1); } #toggle-btn.shown ~ .wrapper nav li:nth-child(1) { transition-delay: .15s; } #toggle-btn.shown ~ .wrapper nav li:nth-child(2) { transition-delay: .125s; } #toggle-btn.shown ~ .wrapper nav li:nth-child(3) { transition-delay: .1s; } |
Также придаем стилей для ссылки, когда мы наводим курсор на ссылку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.link { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); } .link:before, .link:after { position: absolute; content: ''; height: 3px; width: 50%; background: #4ECA78; top: calc(50% + 2px); transition: -webkit-transform .3s cubic-bezier(.5,.5,0,1); transition: transform .3s cubic-bezier(.5,.5,0,1); transition: transform .3s cubic-bezier(.5,.5,0,1), -webkit-transform .3s cubic-bezier(.5,.5,0,1); } .link:before { left: 0; -webkit-transform: translateX(calc(-100% - 10px)) scaleX(0); transform: translateX(calc(-100% - 10px)) scaleX(0); -webkit-transform-origin: left; transform-origin: left; } .link:after { right: 0; -webkit-transform: translateX(calc(100% + 10px)) scaleX(0); transform: translateX(calc(100% + 10px)) scaleX(0); -webkit-transform-origin: right; transform-origin: right; } .link:hover:before { -webkit-transform: translateX(calc(-100% - 10px)) scaleX(1); transform: translateX(calc(-100% - 10px)) scaleX(1); -webkit-transform-origin: right; transform-origin: right; } .link:hover:after { -webkit-transform: translateX(calc(100% + 10px)) scaleX(1); transform: translateX(calc(100% + 10px)) scaleX(1); -webkit-transform-origin: left; transform-origin: left; } |
Шаг 3. JS
Последним шагом станет добавление немного магии, да шучу конечно, нам просто надо сделать быструю анимацию, переключения тригера навигации и красивое развертывание и свертывание, поможет нам в этом вот такой код js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
var elem = document.querySelector('#nav-bg'), toggleBtn = document.querySelector('#toggle-btn'), elemH = elem.getBoundingClientRect().height, elemW = elem.getBoundingClientRect().width; var open = false; var scale = void 0, offsetX = void 0, offsetY = void 0; var calculateValues = function calculateValues() { var w = window.innerWidth; var h = window.innerHeight; var offsetValue = Number(getComputedStyle(elem).getPropertyValue('--offset-value')); offsetX = w / 2 - elemW / 2 - offsetValue; offsetY = h / 2 - elemH / 2 - offsetValue; var radius = Math.sqrt(Math.pow(h, 2) + Math.pow(w, 2)); scale = radius / (elemW / 2) / 2 + .1; // Add '.1' to compensate for Safari sub pixel blur issue return scale; }; var openMenu = function openMenu() { elem.style.setProperty("--translate-x", offsetX + 'px'); elem.style.setProperty("--translate-y", '-' + offsetY + 'px'); elem.style.setProperty("--scale", scale); }; var closeMenu = function closeMenu() { elem.style.setProperty("--scale", 1); elem.style.setProperty("--translate-x", 0); elem.style.setProperty("--translate-y", 0); }; var animateMenu = function animateMenu() { open ? openMenu() : closeMenu(); }; var toggleMenu = function toggleMenu() { open = !open; animateMenu(); toggleBtn.classList.toggle('shown'); }; var resizeHandler = function resizeHandler() { window.requestAnimationFrame(function () { calculateValues(); animateMenu(); }); }; calculateValues(); toggleBtn.addEventListener('click', toggleMenu, false); window.addEventListener("resize", resizeHandler, false); |
В результате у нас получилась вот такая стильная и достаточно простая навигация. Я думаю она станет Вам весьма полезной, если вам нужно отобразить еще пунктов навигации.
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 08.06.2018 в 17:00, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |