Header Components

01 - nav-hamburger

クリックでメニュー表示

HTML

            
<a href="#menu" id="toggle"><span></span></a>
  <div id="menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

SCSS

          
#toggle {
  display: block;
  width: 28px;
  height: 30px;
  margin: 30px auto 10px;
  span{
    position:relative;
    display:block;
    &::after,
    &::before{
      content: "";
      position: absolute;
      left: 0;
      top: -9px;
    }
    &::after{
      top:9px;
    }
    &,
    &::after,
    &::before{
      width: 100%;
      height: 5px;
      background-color: #888;
      transition: all 0.3s;
      backface-visibility: hidden;
      border-radius: 2px;
    }
  }
  //クラス付与
  &.on{
    span{
      background-color: transparent;
      
      &::before{
        transform: rotate(45deg) translate(5px, 5px);
      }
      &::after{
        transform: rotate(-45deg) translate(7px, -8px);
      }
    }
    & + #menu{
      opacity: 1;
      visibility: visible;
    }
  }
}
#menu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
  font-family: "Segoe UI", sans-serif;
  text-align: center;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
  &::after{
    position: absolute;
    top: -15px;
    left: 95px;
    content: "";
    display: block;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid white;
  }
  ul, 
  li, 
  li a {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
  }
  li a {
    padding: 5px;
    color: #888;
    text-decoration: none;
    transition: all .2s;
    
    &:hover,
    &:focus{
      background: #1ABC9C;
      color: #fff;
    }
  }
}

TIPs.DESIGN