Post image

Custom Hamburger Icon

html

<div class="menu-icon">
    <span class="menu-icon__line menu-icon__line-left"></span>
    <span class="menu-icon__line"></span>
    <span class="menu-icon__line menu-icon__line-right"></span>
</div>

css

.menu-icon {
    height: 30px;
    width: 30px;
    z-index: 1;
    cursor: pointer;
}

.menu-icon {
    height: 14px;
    width: 30px;
    position: fixed;
    cursor: pointer;
}

.menu-icon__line {
    height: 2px;
    width: 30px;
    display: block;
    background-color: #fff;
    margin-bottom: 4px;
}

.menu-icon__line-left {
    width: 15px;
    transition: width 0.2s;
}

.menu-icon__line-right {
    width: 10px;
    float: right;
    transition: width 0.2s;
}

.menu-icon__line-left:hover, .menu-icon__line-right:hover {
    width: 30px;
}

I tried using JS to trigger mouseover on menu-icon lines when a user hovers on the menu icon but it doesn’t work. This code only animates when you specifically hover over the given lines and not when you’re on the menu icon which is understandable.

I tried using dispatchEvent in JS too. It isn’t working. Is there any way that I can trigger the animation on menu-icon lines when someone hovers on menu-icon?



Source link

Write A Comment