Navigasi bertingkat

navigasi.scss

/*! 
** Navigation Menu SCSS
** 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 **/

/* Set up variables */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Color varian */
$nav-bg:#de000b;
$nav-bg-child:#2f44b7;
$nav-bg1:#fff;
$nav-bg2:#fdfdfd;
$nav-bg3:#f7f7f7;
$nav-bd-col:1px solid rgba(0, 0, 0, 0.05);
$nav-bd-col2:1px solid rgba(255, 255, 255, 0.05);
$nav-bg-hover:#c5000a;
$nav-bg-hover2:#f7f7f7;
$nav-color:white;
$nav-color2:#333;

/* Base markup */
$base-font-size:16px;
$base-font: "Noto sans", sans-serif;
$base-color:white;

/* Media Queries */
$small: "(max-width: 525px)";

/* Transition */
$cubic:cubic-bezier(.62,.01,.23,1);
$cubic2:cubic-bezier(0, 1, 0.5, 1);

*, body {margin:0;padding:0;font-size:$base-font-size;font-family:$base-font;box-sizing:border-box;}

.navigasi {
  .pembungkus-navigasi {
    display:block;
    width:100%;
    max-width:100%;

    
    .navigasi-utama {
      list-style:none;
      display:block;
      position:relative;      
      text-align:left;
      
      &:before, &:after {
        content:"";
        display:table;
        clear:both;
       }
      
      .unit-navigasi {
        text-decoration:none;
        display:inline-block;
        font-family: inherit;
        font-size:1rem;   
        line-height:50px;
        margin:0;
        transition:300ms background-color $cubic;
        float:left;
        
        a {
          font-size:.925rem;
          padding:.325rem 1.2rem .325rem 1.8rem;
          cursor:pointer;
          user-select:none;

          i {
            vertical-align:middle;
            position:relative;
            top:-.0625rem;
            padding-right:.3rem;
            font-size:1.2rem;
          }
          &:hover, &:active {
            background-color:$nav-bg-hover;
            transition:200ms background-color $cubic;
            

          }
        }
        
        &.punya-turunan {        
        position:relative;
        padding-right:0;
        
        a {
          box-sizing:border-box;
          display:inline-block;
          position:relative;
          padding-right:25px;
          width:100%;
          &: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;
            transform: rotate(-45deg);
          }
          &:hover, &:active {
            background-color: $nav-bg-hover;
          }
        }
        .navigasi-turunan {
          display:none;
          position:absolute;
          top:50px;
          left:0;
          box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.1);
          
          .unit-navigasi {
            background-color:#fff;
            box-sizing:border-box;
            text-align:left;
            width:200px;
            margin:0;            
            
            a {
              color:#333;
              font-size: .825rem;
              border-top: 1px solid rgba(255, 255, 255, 0.08);
              padding-left:25px;
              &:before, &:after {
                content:none;
              }
              
              &:hover {
                background-color:$nav-bg-hover2;
              }
            }
            
            &.punya-turunan {
              padding-right:0;
              
              &[aria-expanded=true] {
                background-color:$nav-bg-hover2;
              }
              a {
                box-sizing:border-box;
                width:100%;
                &:before {
                  content:"";
                  border-color:#333;
                  transform:rotate(225deg);
                }             
                &:hover, &:active {
                  background-color: $nav-bg-hover2;
                }
              }
              .navigasi-turunan {
                
                top:0;
                left:200px;
                .unit-navigasi {
                  a {
                    &:before, &:after {
                      content:none;
                    }
                  }
                }
              }
            }

            &:first-child {
              border:0;
            }            
          }
        }
      }
        
        a {
          text-decoration:none;
          display:block;
          padding: 0 .5em;
          color:$nav-color;
          
        }
      }      
    }
    
    .pembungkus {
      max-width:90%;
      width:100%;
      margin:auto;
      -webkit-box-sizing:border-box;
              box-sizing:border-box;
      
    }
  }
  .navigasi-bg {
    background-color:$nav-bg;
    color: $nav-color;
  }
  .tombol-hamburger {
    display: none;
  }
}

/* Mobile */
@media screen and #{$small} {
  .navigasi {
    height:50px;
    position:relative;
    background-color:$nav-bg;
    
    .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);      
      transform: translateY(-50%);
      cursor:pointer;
      z-index:1;
      
      .hamburger {
        display:block;
        position:absolute;
        width:15px;
        height:1px;        
        top:50%;
        right:6px;
        background-color:white;
        transform: translateY(-50%);
        z-index:-1;        
        
        &.garis-atas {
          top:8px;
        }
        
        &.garis-tengah {
          right:6px;
        }
        
        &.garis-bawah {
          top:18px;
        }
      }
    }
    
    .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);

        .unit-navigasi {
          display:block;
          margin:0;
          background-color:$nav-bg1;     
          float:none;
          
          a {
            font-size:.825rem;
            color:$nav-color2;
            padding:0 25px;
            padding-right:50px;
            border-top:$nav-bd-col;
            
            &:hover, &:active {
              background-color:$nav-bg-hover2;
            }         
          }
          
          &.punya-turunan {
            
            a {
              padding-right:50px;
              &:before {                
                left:96%;
                border-color:$nav-color2;
              }
              &:hover, &:active {
                background-color:$nav-bg-hover2;
              } 
            }
            
            .navigasi-turunan {
              position:relative;
              top:0;
              left:0;
              background-color:transparent;
              box-shadow:none;
              border-top:$nav-bd-col;
              
              .unit-navigasi {
                width:100%;                
                background-color:$nav-bg2;
                border-top:$nav-bd-col;
                
                a {
                  padding:0 30px;
                  
                  &:hover, &:active {
                    background-color:$nav-bg-hover2;
                  } 
                }
                
                &.punya-turunan {
                  &[aria-expanded=true] {
                    background-color:transparent;
                  }
                  
                   a {                  
                      &:hover, &:active {
                        background-color:$nav-bg-hover2;
                      } 
                    }
                  .navigasi-turunan {
                    
                    width:100%;
                    left:0;
                    top:0;
                    border-top:$nav-bd-col;
                    overflow:hidden;
                    .unit-navigasi {
                      display:block;
                      background-color:$nav-bg3;
                      
                      a {
                        padding:0 35px;  
                        &:hover, &:active {
                          background-color:#e4e4e4;
                        } 
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
* Some glitch for safari, safari can't read  
* percentage of absolute position, idk why :/
* We can callback here */
_::-webkit-full-page-media, _:future, :root .navigasi .tombol-hamburger .hamburger.garis-tengah {
  top:13px;
}