زر القائمة

زر القائمة

html

<div id="bars">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
    </div>

css

div {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }
        div span {
            width: 100%;
            height: 1px;
            background-color: #fff;
            transition: all 0.5s;
            display: block;
        }
        div.active {
            border-radius: 50%;
            border: 1px solid #fff;
        }
        div.active .one {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) rotate(225deg);
        }
        div.active .three {
            position: absolute;
            bottom: 50%;
            transform: translateY(-50%) rotate(-225deg);
        }
        div.active .two {
            opacity: 0;
            position: absolute;
            top: 50%;
            transition-delay: 0.2s;
            transform: translateY(-50%) translateX(100%);
        }

javascript

let bars = document.getElementById("bars");
        bars.addEventListener("click", function() {
            this.classList.toggle("active");
        })
مصدر الاكواد