switching/css/menu.css

174 lines
3.0 KiB
CSS
Raw Normal View History

2020-03-11 09:53:35 +00:00
* {
box-sizing: border-box;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
/* custom scrollbar */
::-webkit-scrollbar {
width: .95em;
}
/* dummy content */
.content {
2020-02-18 10:43:32 +00:00
float: left;
2020-03-11 09:53:35 +00:00
margin: .75em 0 0 0;
transition: margin .3s ease-in-out;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
.content > p {
margin: .25em 0 .75em 0;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
/* Advanced Checkbox Hack */
body {
-webkit-animation: bugfix infinite 1s;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
label {
position: absolute;
left: 0;
2020-02-18 10:43:32 +00:00
display: none;
2020-03-11 09:53:35 +00:00
width: 2em;
height: .5em;
padding: .05em;
font-size: 1.1em;
color: #fff;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
/* big screens */
nav[role="off-canvas"] {
position: relative;
width: 50em;
margin: 0 auto;
transition-duration: .3s, .5s;
transition-timing-function: ease-in-out;
transition-property: left, opacity, box-shadow;
}
nav[role="off-canvas"] a {
color: #fff;
2020-02-18 10:43:32 +00:00
text-decoration: none;
2020-03-11 09:53:35 +00:00
transition: color .3s ease-in-out;
display: table-cell;
vertical-align: middle;
}
nav[role="off-canvas"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
}
nav[role="off-canvas"] ul > li {
float: left;
padding: .55em .55em;
width: 8em;
margin: .5em;
opacity: .8;
text-transform: uppercase;
display: table;
cursor: pointer;
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color, opacity, padding-left;
cursor: pointer;
}
nav[role="off-canvas"] ul > li:hover {
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
}
nav[role="off-canvas"] ul > li
.active
{
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
/* small screens */
@media screen and (max-width: 44em) {
html,
body {
margin: 0;
overflow-x: hidden;
}
2020-02-18 10:43:32 +00:00
2020-03-11 09:53:35 +00:00
.content {
margin: 2.5em .5em 0 .5em;
}
2020-02-18 10:43:32 +00:00
2020-03-11 09:53:35 +00:00
nav[role="off-canvas"] {
position: absolute;
top: 3em;
left: -20em;
width: 20em;
opacity: 0;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
nav[role="off-canvas"] ul > li {
height: 100%;
width: 100%;
text-align: left;
margin: 0;
background: black;
}
nav[role="off-canvas"] ul > li:hover {
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
label {
display: block;
}
label:after {
2020-02-18 10:43:32 +00:00
position: absolute;
2020-03-11 09:53:35 +00:00
right: .25em;
2020-02-18 10:43:32 +00:00
top: 0;
2020-03-11 09:53:35 +00:00
content: "\2261";
font-size: 1.8em;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
label:hover,
input:checked ~ label {
color: #000;
2020-02-18 10:43:32 +00:00
}
2020-03-11 09:53:35 +00:00
input:checked ~ nav[role="off-canvas"] {
opacity: 1;
left: 0;
box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ nav[role="off-canvas"] ul > li {
padding: .55em .55em .55em 1.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:hover {
padding-left: 3.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
color: inherit;
2020-02-18 10:43:32 +00:00
}
2020-02-21 06:32:32 +00:00
2020-03-11 09:53:35 +00:00
input:checked ~ .content {
margin-left: 20.5em;
margin-right: -20.5em;
}
2020-02-21 06:32:32 +00:00
}