Полноэкранное меню навигации для сайта на CSS3 и JS

Давно я не писал про красивую навигацию на сайте и как ее реализовать, сегодня видать тот самый день, когда сошлись звезды и пора выкатить интересный урок о навигационном меню для сайта. Не буду скрывать, я уже не раз писал уйму уроков о чем-то похожем, но каждый раз в голову приходят разные мысли которыми хочется поделиться с читателями. Идея навигации не новая, ее часто применяют на сайте в виде дополнительного меню, которые прикручено где-то в низу сайта и доносит до посетителя дополнительную информацию.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Наше меню будет нечто похоже, мы создадим гамбургер кнопку, которая будет находиться постоянно в прилепленном состоянии в низу страницы в левом углу. При нажатии на нее буде моментально разворачиваться полноэкранная навигация, обратите внимания, что скорость ее работы будет составлять 60FPS, что добавляет общей скорости к сайту.

Шаг 1. HTML

Как обычно, первый шаг будет с создания разметки, если вы внимательно читали ранее уроки, то знаете, что перед этим стоит подключить к вашей страницы также дополнительные скрипты которые необходимы для работы сайта. Разметку можно поделить на две части, первая это создание структуры кнопки:

<div id="nav-bg" class="btn"></div>
<div id="toggle-btn" class="btn">
<span></span>
<span></span>
<span></span>
</div>

</div>

Мы присвоили к кнопкам класс btn, позже в стилях мы его обыграем и придадим стилей, вторая часть разметки будет создание самого содержания кнопки, то есть то, что мы увидим при нажатии:

<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>

<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>

</ul>

</nav>

</div>

Здесь мы также добавили классы для ссылки, так как при наведении курсора на ссылку в меню, у нас будет небольшая анимация с выделением, чтобы подчеркнуть активный пункт меню.

Шаг 2. CSS

Теперь перейдем к стилям, для начала нам необходимо залить фон полноэкранной навигации и установить трансформацию, по умолчанию фон будет у нас белый:

#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;
}

#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;

}

Затем нужно не упасть лицом в грязь перед посетителями и сделать красивую кнопку навигации, которая будет у нас круглая с тригерами:

.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;
}

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ледующим шагом будет стилизация навигации которая будет отображаться при развертывании меню, делаем мы это следующим образом:

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

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;

}

Также придаем стилей для ссылки, когда мы наводим курсор на ссылку:

.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;
}

.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:

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);

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);

В результате у нас получилась вот такая стильная и достаточно простая навигация. Я думаю она станет Вам весьма полезной, если вам нужно отобразить еще пунктов навигации.

Полноэкранное меню навигации для сайта на CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Полноэкранное меню навигации для сайта на CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи