Skip to content

Instantly share code, notes, and snippets.

@rafonzoo
Created September 7, 2018 15:31
Show Gist options
  • Save rafonzoo/750db23934120abd5c34c9cc902a8258 to your computer and use it in GitHub Desktop.
Save rafonzoo/750db23934120abd5c34c9cc902a8258 to your computer and use it in GitHub Desktop.
@charset "UTF-8";/*!
** Navigation Menu — Compiled
** Navigation color theme: ID Flag
** See details https://blog.helloraf.com/?p=1263&preview=true
** Working demo https://htmlpreview.github.io/?https://cdn.rawgit.com/rafonzoo/navigation/master/assets/navigation.html
** By @rafonzoo **/@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*,body{margin:0;padding:0;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-box-sizing:border-box;box-sizing:border-box}.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:after,.navigasi .pembungkus-navigasi .navigasi-utama:before{content:"";display:table;clear:both}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi{text-decoration:none;display:inline-block;font-family:inherit;font-size:1rem;margin:0;-webkit-transition:.3s background-color cubic-bezier(.62,.01,.23,1);transition:.3s background-color cubic-bezier(.62,.01,.23,1);float:left}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a{font-size:.925rem;padding:.325rem 1.2rem .325rem 1.8rem;line-height:50px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:focus{outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.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:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:hover{background-color:#c5000a;-webkit-transition:.2s background-color cubic-bezier(.62,.01,.23,1);transition:.2s background-color cubic-bezier(.62,.01,.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{-webkit-box-sizing:border-box;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:-.1625rem;cursor:pointer;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:hover{background-color:#c5000a}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan{display:none;position:absolute;top:50px;left:0;-webkit-box-shadow:0 0 3px 1px rgba(0,0,0,.1);box-shadow:0 0 3px 1px rgba(0,0,0,.1)}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi{background-color:#fff;-webkit-box-sizing:border-box;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,.08);padding-left:25px}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:after,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:before{content:none}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:first-child{border:0}.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{-webkit-box-sizing:border-box;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:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:hover{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:after,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:before{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:#fff}.navigasi .pembungkus-navigasi .pembungkus{max-width:90%;width:100%;margin:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.navigasi .navigasi-bg{background-color:#de000b;color:#fff}.navigasi .tombol-hamburger{display:none}@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:focus{outline:0;-webkit-tap-highlight-color:transparent;border-color:transparent}.navigasi .tombol-hamburger .hamburger{display:block;position:absolute;width:15px;height:1px;top:50%;right:6px;background-color:#fff;-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;-webkit-box-shadow:0 0 3px 1px rgba(0,0,0,.1);box-shadow:0 0 3px 1px rgba(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,.05)}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi a:hover{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:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan a:hover{background-color:#f7f7f7}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan{position:relative;top:0;left:0;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;border-top:1px solid rgba(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,.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:active,.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[aria-expanded=true]{background-color:transparent}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan a:hover{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,.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:active,.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi.punya-turunan .navigasi-turunan .unit-navigasi a:hover{background-color:#e4e4e4}}_::-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