[html/css] 마우스 갖다대면 빼꼼 내미는 div. Animation.

# HTML

<div class="menu-columns">
        <ul class="menu-columns__ul">
            <li class="menu-columns__ul__item"><span>준비중</span></li>
            <li class="menu-columns__ul__item"><span>준비중</span></li>
            <li class="menu-columns__ul__item"><span>준비중</span></li>
        </ul>
    </div>

 

# CSS

 

.menu-columns{
    position: fixed;
    left: -75px;
 }

 

살짝 감추고 있다가 마우스를 대면 나타나는 효과와 스크롤 내려도 같이 이동하게 하기 위해 position:fixed를 사용합니다. 

 

.menu-columns__ul__item{
    width: 120px;
    height: 50px;
    border-radius: 5px;
    background-color: white;
    /* -- item마다 아래 간격주기 -- */
    margin-bottom: 15px;
    /* -- 마우스가 올라가면 커서 모양이 바뀜 -- */
    cursor: pointer;
    /* -- span text 중앙 정렬 -- */
    text-align: center; 
    line-height: 50px;
}

 

설명은 주석과 같습니다. 아래는 애니메이션입니다.

.menu-columns__ul__item:nth-child(1):hover{
    animation:first-li-slide-right .5s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes first-li-slide-right{
    0%{
        transform:translateX(0)
    }
    100%{
        transform:translateX(35px)
    }
}
.menu-columns__ul__item:nth-child(2):hover{
    animation:second-li-slide-right .5s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes second-li-slide-right{
    0%{
        transform:translateX(0)
    }
    100%{
        transform:translateX(45px)
    }
}
.menu-columns__ul__item:nth-child(3):hover{
    animation:third-li-slide-right .5s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes third-li-slide-right{
    0%{
        transform:translateX(0)
    }
    100%{
        transform:translateX(55px)
    }
}

 

부드러운 효과 주고자 .5s했고 both로 마우스 올릴 경우 연속이 아니라 한 번만 실행합니다.

 

저는 이렇게 했다일 뿐, translateX() 값도 원하시는 대로 바꾸셔서 적용하시면 되실 듯합니다!