Instantly share code, notes, and snippets.
Last active
September 7, 2018 07:20
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save rafonzoo/90d139baa80c319e890f0d7053c7a64e to your computer and use it in GitHub Desktop.
Navigasi bertingkat - Compiled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
** Navigation Menu — Compiled | |
** Navigation color theme: Indonesia Flag | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://codepen.io/rafonzoo/pen/KxvbwX?editors=0110 | |
** By @rafonzoo **/ | |
*, html, body { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html, body { | |
margin: 0; | |
padding: 0; | |
text-decoration: none; | |
} | |
body { | |
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; | |
font-size: 17px; | |
font-weight: 400; | |
font-style: normal; | |
letter-spacing: .021em; | |
} | |
ul, ol { | |
padding: 0; | |
margin: 0; | |
} | |
.navigasi .pembungkus-navigasi { | |
display: block; | |
width: 100%; | |
max-width: 100%; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama { | |
list-style: none; | |
display: block; | |
position: relative; | |
text-align: left; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama:before, .navigasi .pembungkus-navigasi .navigasi-utama:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi { | |
text-decoration: none; | |
display: inline-block; | |
font-family: inherit; | |
font-size: 1rem; | |
line-height: 50px; | |
margin: 0; | |
transition: 300ms background-color cubic-bezier(0.62, 0.01, 0.23, 1); | |
float: left; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a { | |
font-size: .925rem; | |
padding: .325rem 1.2rem .325rem 1.8rem; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a i { | |
vertical-align: middle; | |
position: relative; | |
top: -.0625rem; | |
padding-right: .3rem; | |
font-size: 1.2rem; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:active { | |
background-color: #c5000a; | |
transition: 200ms background-color cubic-bezier(0.62, 0.01, 0.23, 1); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan { | |
position: relative; | |
padding-right: 0; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a { | |
box-sizing: border-box; | |
display: inline-block; | |
position: relative; | |
padding-right: 25px; | |
width: 100%; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:before { | |
display: block; | |
position: absolute; | |
vertical-align: middle; | |
color: transparent; | |
font-size: 0; | |
content: ""; | |
height: 5px; | |
width: 5px; | |
background-color: transparent; | |
border-left: 1px solid; | |
border-bottom: 1px solid; | |
border-color: #fff; | |
top: 50%; | |
left: 100%; | |
margin-left: -1rem; | |
margin-top: -0.1625rem; | |
cursor: pointer; | |
-webkit-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:active { | |
background-color: #c5000a; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan { | |
display: none; | |
position: absolute; | |
top: 50px; | |
left: 0; | |
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi { | |
background-color: #fff; | |
box-sizing: border-box; | |
text-align: left; | |
width: 200px; | |
margin: 0; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a { | |
color: #333; | |
font-size: .825rem; | |
border-top: 1px solid rgba(255, 255, 255, 0.08); | |
padding-left: 25px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:before, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:after { | |
content: none; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:hover { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan { | |
padding-right: 0; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan[aria-expanded=true] { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a { | |
box-sizing: border-box; | |
width: 100%; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:before { | |
content: ""; | |
border-color: #333; | |
-webkit-transform: rotate(225deg); | |
transform: rotate(225deg); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:active { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan { | |
top: 0; | |
left: 200px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:before, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:after { | |
content: none; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi:first-child { | |
border: 0; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a { | |
text-decoration: none; | |
display: block; | |
padding: 0 .5em; | |
color: white; | |
} | |
.navigasi .pembungkus-navigasi .pembungkus { | |
max-width: 90%; | |
width: 100%; | |
margin: auto; | |
box-sizing: border-box; | |
} | |
.navigasi .navigasi-bg { | |
background-color: #de000b; | |
color: white; | |
} | |
.navigasi .tombol-hamburger { | |
display: none; | |
} | |
/* Mobile */ | |
@media screen and (max-width: 525px) { | |
.navigasi { | |
height: 50px; | |
position: relative; | |
background-color: #de000b; | |
} | |
.navigasi .tombol-hamburger { | |
display: block; | |
position: absolute; | |
width: 30px; | |
height: 30px; | |
right: 1em; | |
top: 50%; | |
border-color: rgba(0, 0, 0, 0); | |
background-color: rgba(0, 0, 0, 0); | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
cursor: pointer; | |
z-index: 1; | |
} | |
.navigasi .tombol-hamburger .hamburger { | |
display: block; | |
position: absolute; | |
width: 15px; | |
height: 1px; | |
top: 50%; | |
right: 6px; | |
background-color: white; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
z-index: -1; | |
} | |
.navigasi .tombol-hamburger .hamburger.garis-atas { | |
top: 8px; | |
} | |
.navigasi .tombol-hamburger .hamburger.garis-tengah { | |
right: 6px; | |
} | |
.navigasi .tombol-hamburger .hamburger.garis-bawah { | |
top: 18px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama { | |
display: none; | |
position: absolute; | |
top: 50px; | |
left: 0; | |
width: 100%; | |
height: auto; | |
max-width: 100%; | |
background-color: transparent; | |
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi { | |
display: block; | |
margin: 0; | |
background-color: #fff; | |
float: none; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a { | |
font-size: .825rem; | |
color: #333; | |
padding: 0 25px; | |
padding-right: 50px; | |
border-top: 1px solid rgba(0, 0, 0, 0.05); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:active { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a { | |
padding-right: 50px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:before { | |
left: 96%; | |
border-color: #333; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:active { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan { | |
position: relative; | |
top: 0; | |
left: 0; | |
background-color: transparent; | |
box-shadow: none; | |
border-top: 1px solid rgba(0, 0, 0, 0.05); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi { | |
width: 100%; | |
background-color: #fdfdfd; | |
border-top: 1px solid rgba(0, 0, 0, 0.05); | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a { | |
padding: 0 30px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:active { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan[aria-expanded=true] { | |
background-color: transparent; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:active { | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan { | |
width: 100%; | |
left: 0; | |
top: 0; | |
border-top: 1px solid rgba(0, 0, 0, 0.05); | |
overflow: hidden; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi { | |
display: block; | |
background-color: #f7f7f7; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a { | |
padding: 0 35px; | |
} | |
.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:hover, .navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:active { | |
background-color: #e4e4e4; | |
} | |
} | |
/** | |
* Some glitch for safari, safari can't read | |
* percentage of absolute position | |
* We can callback here */ | |
_::-webkit-full-page-media, _:future, :root .navigasi .tombol-hamburger .hamburger.garis-tengah { | |
top: 13px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment