MenuToggle.css
.headerBox .toggle { display: block; width: 30px; height: 20px; position: relative; } .headerBox .toggle span { font-size: 0; color: transparent; height: 2px; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); background: #fff; } .headerBox .toggle span::before, .headerBox .toggle span::after { content: ''; display: block; width: 100%; height: 2px; position: absolute; left: 0; transition: 0.3s ease-in-out; background: #fff; } .headerBox .toggle span::before { top: -9px; } .headerBox .toggle span::after { bottom: -9px; } .headerBox .toggle:hover span { background: transparent; } .headerBox .toggle:hover span::before { top: 0; transform: rotate(45deg) } .headerBox .toggle:hover span::after { bottom: 0; transform: rotate(-45deg) }