navigation button done
This commit is contained in:
dqnid committed
1 parent
6659f74c86
commit
ddb3d951af
4 files changed
+318
No files matched your search
@@ -554,6 +554,117 @@ body {
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
float: right; }
|
float: right; }
|
||||||
|
|
||||||
|
.navigation__checkbox {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.navigation__button {
|
||||||
|
background-color: #fff;
|
||||||
|
height: 7rem;
|
||||||
|
width: 7rem;
|
||||||
|
position: fixed;
|
||||||
|
top: 6rem;
|
||||||
|
right: 6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 2000;
|
||||||
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
.navigation__background {
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
top: 6.5rem;
|
||||||
|
right: 6.5rem;
|
||||||
|
background-image: radial-gradient(#7ed56f, #28b485);
|
||||||
|
z-index: 1000;
|
||||||
|
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); }
|
||||||
|
|
||||||
|
.navigation__nav {
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1500;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
|
||||||
|
|
||||||
|
.navigation__list {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
list-style: none;
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
|
.navigation__item {
|
||||||
|
margin: 1rem; }
|
||||||
|
|
||||||
|
.navigation__link:link, .navigation__link:visited {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 300;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
|
||||||
|
background-size: 250%;
|
||||||
|
transition: all 0.4s; }
|
||||||
|
.navigation__link:link span, .navigation__link:visited span {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.navigation__link:hover, .navigation__link:active {
|
||||||
|
color: #28b485;
|
||||||
|
background-position: 100%;
|
||||||
|
transform: translateX(1rem); }
|
||||||
|
|
||||||
|
.navigation__checkbox:checked ~ .navigation__background {
|
||||||
|
transform: scale(80); }
|
||||||
|
|
||||||
|
.navigation__checkbox:checked ~ .navigation__nav {
|
||||||
|
opacity: 1;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.navigation__icon {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3.4rem; }
|
||||||
|
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
|
||||||
|
width: 3rem;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #333;
|
||||||
|
display: inline-block; }
|
||||||
|
.navigation__icon::before, .navigation__icon::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
transition: all 0.2s; }
|
||||||
|
.navigation__icon::before {
|
||||||
|
top: -0.8rem; }
|
||||||
|
.navigation__icon::after {
|
||||||
|
top: 0.8rem; }
|
||||||
|
|
||||||
|
.navigation__button:hover .navigation__icon::before {
|
||||||
|
top: -1rem; }
|
||||||
|
|
||||||
|
.navigation__button:hover .navigation__icon::after {
|
||||||
|
top: 1rem; }
|
||||||
|
|
||||||
|
.navigation__checkbox:checked + .navigation__button .navigation__icon {
|
||||||
|
background-color: transparent; }
|
||||||
|
|
||||||
|
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(135deg); }
|
||||||
|
|
||||||
|
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-135deg); }
|
||||||
|
|
||||||
.section-about {
|
.section-about {
|
||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
padding: 25rem 0;
|
padding: 25rem 0;
|
||||||
|
|||||||
@@ -18,6 +18,48 @@
|
|||||||
<title>Natours | Exciting tours for adventurous people</title>
|
<title>Natours | Exciting tours for adventurous people</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="navigation">
|
||||||
|
<input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
|
||||||
|
<label for="navi-toggle" class="navigation__button">
|
||||||
|
<span class="navigation__icon"> </span>
|
||||||
|
</label>
|
||||||
|
<div class="navigation__background"> </div>
|
||||||
|
|
||||||
|
<nav class="navigation__nav">
|
||||||
|
<ul class="navigation__list">
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="#" class="navigation__link">
|
||||||
|
<span>01</span>
|
||||||
|
About Natous</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="#" class="navigation__link">
|
||||||
|
<span>02</span>
|
||||||
|
Your benefits</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="#" class="navigation__link">
|
||||||
|
<span>03</span>
|
||||||
|
Popular tours</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="#" class="navigation__link">
|
||||||
|
<span>04</span>
|
||||||
|
Stories</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="#" class="navigation__link">
|
||||||
|
<span>05</span>
|
||||||
|
Book now</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__logo-box">
|
<div class="header__logo-box">
|
||||||
<img src="./img/logo-white.png" alt="Logo" class="header__logo" />
|
<img src="./img/logo-white.png" alt="Logo" class="header__logo" />
|
||||||
|
|||||||
@@ -0,0 +1,164 @@
|
|||||||
|
.navigation {
|
||||||
|
&__checkbox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background-color: $color-white;
|
||||||
|
height: 7rem;
|
||||||
|
width: 7rem;
|
||||||
|
position: fixed;
|
||||||
|
top: 6rem;
|
||||||
|
right: 6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 2000;
|
||||||
|
box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__background {
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
top: 6.5rem;
|
||||||
|
right: 6.5rem;
|
||||||
|
background-image: radial-gradient(
|
||||||
|
$color-primary-light,
|
||||||
|
$color-primary-dark
|
||||||
|
);
|
||||||
|
z-index: 1000;
|
||||||
|
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
|
||||||
|
|
||||||
|
// transform: scale(80);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav {
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1500;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
&:link,
|
||||||
|
&:visited {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 300;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
color: $color-white;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
background-image: linear-gradient(
|
||||||
|
120deg,
|
||||||
|
transparent 0%,
|
||||||
|
transparent 50%,
|
||||||
|
$color-white 50%
|
||||||
|
);
|
||||||
|
|
||||||
|
background-size: 250%;
|
||||||
|
transition: all 0.4s;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: $color-primary-dark;
|
||||||
|
background-position: 100%;
|
||||||
|
transform: translateX(1rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//FUNCTIONALITY
|
||||||
|
&__checkbox:checked ~ &__background {
|
||||||
|
transform: scale(80);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__checkbox:checked ~ &__nav {
|
||||||
|
opacity: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ICON
|
||||||
|
&__icon {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3.4rem;
|
||||||
|
|
||||||
|
&,
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
width: 3rem;
|
||||||
|
height: 2px;
|
||||||
|
background-color: $color-gray-dark-3;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
//TODO: check transform origin
|
||||||
|
&::before {
|
||||||
|
top: -0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button:hover &__icon::before {
|
||||||
|
top: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button:hover &__icon::after {
|
||||||
|
top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__checkbox:checked + &__button &__icon {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__checkbox:checked + &__button &__icon::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__checkbox:checked + &__button &__icon::after {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -18,5 +18,6 @@
|
|||||||
@import "layout/header";
|
@import "layout/header";
|
||||||
@import "layout/grid";
|
@import "layout/grid";
|
||||||
@import "layout/footer";
|
@import "layout/footer";
|
||||||
|
@import "layout/navigation";
|
||||||
|
|
||||||
@import "pages/home";
|
@import "pages/home";
|
||||||
Reference in new issue
Block a user