CSS3 반응형 측면 탐색 드롭다운 메뉴 코드

HTML {
  글꼴 계열: 'Lato', 산세리프;
}

메인 {
  디스플레이: -webkit-box;
  표시: -ms-flexbox;
  디스플레이: 플렉스;
  -webkit-box-pack: 센터;
      -ms-flex-pack: 센터;
          내용 정당화: 센터;
  -webkit-box-align: 중앙;
      -ms-flex-align: 중앙;
          항목 정렬: 중앙;
  높이: 100vh;
}

입력.햄버거 {
  디스플레이: 없음;
}
input.hamburger:체크됨 ~ 라벨 > 나는 {
  배경색: 투명;
  -웹킷 변환: 회전(90도);
          변환: 회전(90도);
}
input.hamburger:체크됨 ~ 라벨 > 나: {
전에   -webkit-transform: 번역(-50%, -50%) 회전(315deg);
          변환: 이동(-50%, -50%) 회전(315deg);
}
input.hamburger:체크됨 ~ 라벨 > 나: {
이후   -webkit-transform: 번역(-50%, -50%) 회전(-315deg);
          변환: 이동(-50%, -50%) 회전(-315deg);
}
input.hamburger:checked ~ 라벨 닫기 {
  색상: #222;
  너비: 100%;
}

一款蓝color扁平风格의 CSS3 SVG 제조는 响应式侧边导航下拉菜单代码，适用于用户个人中心左侧栏下拉菜单效果。