CSS Анимированная кнопка меню

[dna]

Сегодня раздумывал над тем, как можно сделать красивую кнопку меню и чтобы это было что то новое, в голову ко мне пришла одна идея.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Работал над этим не очень долго, больше всего было проблем с возвращением в исходное состояние, так как я совершенно не знаю JS.
Сама анимация сделана с помощью CSS, а вот убирал её уже невидимым блоком, который появляться при клике. Думаю как идея хорошая, но можно доработать.

HTML:

Спойлер: HTML

<button class="navbutton" onmousedown="viewNav()">
    <div class="navline"></div>
    <div class="navline1"></div>
</button>
<div id="nav">
        <button class="closenav" onmousedown="closeNav()"></button>
</div>

CSS:

Спойлер: CSS

.navbutton{
    width: 40px;
    height: 40px;
    
    margin-right: 30px;
    padding: 1px;
}

.navline{   
    width: 35px;
    height: 1px;
    
    margin-top: 5px;
    
    border: 1px solid white;
    background-color: white;
    
    transition: transform 0.2s linear;
}

.navline1{
    content: "";
    display: block;
    
    width: 35px;
    height: 1px;
    
    margin-top: 5px;
    
    border: 1px solid white;
    background-color: white;
    
    transition: transform 0.2s linear;
}

.navbutton:focus .navline{
    transform: rotate(45deg) translate(7px,6px);
}

.navbutton:focus .navline1{
    transform: rotate(-45deg);
}

#nav{
    width: 100%;
    height: 100vh;
    
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    
    display: none;
    
    text-align: center;
    
    padding-top: 50px;
}

.closenav{
    position: absolute;
    top: 0;
    right: 30px;
    z-index: 20;
    
    width: 40px;
    height: 40px;
}

JS:

Спойлер: JavaScript

function viewNav(){
    document.getElementById("nav").style.display = "block";
};

function closeNav(){
    document.getElementById("nav").style.display = "none";
};

Не расцениваю это как какой то урок, скорее всего делюсь с вами такой идеей. ​