Skip to content

Instantly share code, notes, and snippets.

@rafonzoo

rafonzoo/navigasi-compiled.css

Last active September 7, 2018 07:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rafonzoo/90d139baa80c319e890f0d7053c7a64e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rafonzoo/90d139baa80c319e890f0d7053c7a64e to your computer and use it in GitHub Desktop.
Download ZIP
Navigasi bertingkat - Compiled
Raw
navigasi-compiled.css
/*!
** 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