햄버거메뉴 코딩으로 만들기

이미지 없이 코딩으로 표현한 햄버거 메뉴

css

<style>
.toggle{
  position: absolute;
  top: 99px;
  z-index: 999999;
  width: 15px;
  height: 11px;
  left: 10px;
  }
  
  .toggle span{
    position: relative;
    display: block;
  }
  
  .toggle span, .toggle span:after, .toggle span:before  {
    width: 100%;
    height: 1px;
    background-color: #fff;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 0;
  }
  
  .toggle span:after, .toggle span:before {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
}
  
  .toggle span:after {
  top:4px;    
  }
  
</style>