valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-03 16:10:26 +03:00
Code Issues Releases Activity

Add an animation menu on the only CSS

Browse Source 
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
Valentin Popov
2019-03-24 19:46:33 +04:00
parent 456eeb794b
commit 9f1e42d525
2 changed files with 90 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
_scss/components/_navigation.scss
View File

@ -1,36 +1,87 @@
.nav-pills {
list-style-type: none;
margin: 0;
overflow: hidden;
.navigation-container {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100px;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
text-align: center;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
li {
float: left;
padding: .5em;
.toggle-button {
display: none;
&:checked ~ .navigation {
transform: none;
transition: all .1s;
}
&:checked ~ .toggle-label {
span {
opacity: 0;
top: 50%;
}
span:first-child {
opacity: 1;
transform: rotate(405deg);
}
span:last-child {
opacity: 1;
transform: rotate(-405deg);
}
}
}
.nav-link {
text-align: center;
text-decoration: none;
text-transform: uppercase;
&:active,
&:focus,
&:hover {
border: 0;
text-decoration: none;
}
}
.nav-right {
.toggle-label {
float: right;
}
height: 20px;
position: relative;
right: 40px;
top: 40px;
width: 15px;
@media (max-width: 382px) {
.nav-right,
.nav-pills li {
float: none;
&:hover {
cursor: pointer;
}
span {
background: $color-text;
height: 2px;
position: absolute;
top: 50%;
width: 100%;
&:first-child {
top: 3px;
}
&:last-child {
top: 16px;
}
}
}
.navigation {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100%;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
position: fixed;
right: 0;
top: 100px;
transform: scale(.1, 0);
transform-origin: 100% 0%;
transition: none;
width: 100%;
}