/*Кнопка меню*/
.menu-button {
height: 70px;
width: 70px;
position: fixed;
top: 0;
right: 0;
cursor: pointer;
z-index: 13;
}
.menu-button:after {
content: "";
background-color: white;
height: 3px;
width: 50%;
position: absolute;
top: 27px;
left: 50%;
transform: translateX(-50%);
transition: 0.5s ease;
}
.menu-button:hover:after {
top: 33px;
}
.menu-button.open-done:after {
transform: rotate(45deg);
left: 17px;
top: 33px;
}
.menu-button.open-done:hover:after {
transform: rotate(45deg);
left: 17px;
top: 33px;
}
.menu-button:before {
content: "";
background-color: white;
height: 3px;
width: 50%;
position: absolute;
top: 43px;
left: 50%;
transform: translateX(-50%);
transition: 0.5s ease;
}
.menu-button:hover:before {
transform: rotate(90deg);
left: 17px;
top: 33px;
}
.menu-button.open-done:before {
transform: rotate(-45deg);
left: 17px;
top: 33px;
}
.menu-button.open-done:hover:before {
transform: rotate(-45deg);
left: 17px;
top: 33px;
}
/*Задвигающиеся блоки*/
.menu-block-1 {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 0;
background-color: #895605;
transition: 1s;
}
.menu-block-1.open-done {
width: 100%;
z-index: 10;
}
.menu-block-1.z_index {
z-index: 10;
}
.menu-block-2 {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 0;
background-color: #072B5A;
transition: 1s;
}
.menu-block-2.open-done {
width: 100%;
z-index: 11;
}
.menu-block-2.z_index {
z-index: 11;
}
/*Навигация*/
.nav {
display: grid;
grid-template-columns: repeat(3, 20vw);
grid-template-rows: repeat(2, 40vh);
justify-items: center;
align-items: center;
grid-gap: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav.open-done {
z-index: 12;
}
.nav.z_index {
z-index: 12;
}
.nav_item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
justify-self: center;
}
.nav_item2 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
justify-self: center;
}
.nav_item3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
justify-self: center;
}
.nav_item4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
justify-self: center;
}
.nav_item5 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
justify-self: center;
}
.nav_item6 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
justify-self: center;
}
.nav_title {
text-transform: uppercase;
color: #c6c6c6;
text-align: center;
}
.menu_icon {
width: 100%;
height: 20vh;
fill: #fff;
}
nav a {
display: block;
transform: translateX(100vw);
opacity: 0;
visibility: hidden;
transition: 0.5s,
1s opacity,
1s transform;
}
nav a.open-done {
transform: translateX(0);
opacity: 1;
visibility: visible;
z-index: 12;
}
nav a:hover {
text-shadow:0px 0px 30px #e1aa1c;
}
nav svg {
transition: all 0.5s;
}
nav svg:hover {
filter: drop-shadow(0 0 5px #E1AA1C);
}
Спасибо за внимание!