切换“圆形”动画全屏菜单的汉堡菜单

Question

我只有使用css的以下解决方案有效，但是我也可以使用jquery来实现吗？ 应该有一个汉堡图标，该图标可以动画成十字形，并打开带有“圆圈”动画的全屏菜单（请参见下面的jsfiddle）

<div class="outer-menu">
  <input class="checkbox-toggle" type="checkbox" />
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu">
    <div>
      <div>
        <ul>
            <li>Menu</li>

        </ul>
      </div>
    </div>
  </div>
</div>

CSS

    * {
        box-sizing: border-box;

        font-weight: 300;
    }

    .outer-menu {
        position: fixed;
        top: 50px;
        right: 75px;
        z-index: 1;

    }
    
    .outer-menu .checkbox-toggle {
        position: absolute;
        top: -13px;
        right: -50px;
        z-index: 2;
        cursor: pointer;
        width: 40px;
        height: 40px;
        opacity: 0;

    }
  
  
    .outer-menu .checkbox-toggle:checked + .hamburger > div {
        transform: rotate(135deg);
    }

    .outer-menu .checkbox-toggle:checked + .hamburger > div:before,
    .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
        top: 0;
        transform: rotate(90deg);
    }

    .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
        opacity: 0;
    }

    .outer-menu .checkbox-toggle:checked ~ .menu {
        pointer-events: auto;
        visibility: visible;
    }

    .outer-menu .checkbox-toggle:checked ~ .menu > div {
        transform: scale(1);
        transition-duration: .75s;
    }

    .outer-menu .checkbox-toggle:checked ~ .menu > div > div {
        opacity: 1;
        transition: opacity 0.4s ease 0.4s;
    }

    .outer-menu .checkbox-toggle:hover + .hamburger {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
        transform: rotate(225deg);
    }

    .outer-menu .hamburger {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        padding: .5em 1em;
        cursor: pointer;
        transition: box-shadow 0.4s ease;
        backface-visibility: hidden;
    }
    
    .outer-menu .hamburger > div {
        position: relative;
        width: 100%;
        height: 2px;
        background: #ff922d;
        transition: all 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .outer-menu .hamburger > div:before,
    .outer-menu .hamburger > div:after {
        content: '';
        position: absolute;
        z-index: 1;
        top: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background: inherit;
        transition: all 0.4s ease;
    }

    .outer-menu .hamburger > div:after {
        top: 10px;
    }

    .outer-menu .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        visibility: hidden;
        overflow: hidden;
        backface-visibility: hidden;
        outline: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .outer-menu .menu > div {
        width: 200vw;
        height: 200vw;
        color: #fefefe;
        background: rgba(5, 5, 5, 0.95);
        border-radius: 50%;
        transition: all 0.4s ease;
        flex: none;
        transform: scale(0);
        backface-visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .outer-menu .menu > div > div {
        text-align: center;
        max-width: 90vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
        overflow-y: auto;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .outer-menu .menu > div > div > ul {
        list-style: none;
        padding: 0 1em;
        margin: 0;
        display: block;
        max-height: 100vh;
    }

    .outer-menu .menu > div > div > ul > li {
        padding: 0;
        margin: 0.25em;
        font-size: 3em;
        display: block;
    }

    .outer-menu .menu > div > div > ul > li > a {
        position: relative;
        display: inline;
        cursor: pointer;
        transition: color 0.4s ease;
        letter-spacing: 3px;
    }

    .outer-menu .menu > div > div > ul > li > a:hover {
        color: #f5f5f5;
        text-decoration: none;
    }

    .outer-menu .menu > div > div > ul > li > a:hover:after {
        width: 100%;
    }

    .outer-menu .menu > div > div > ul > li > a:after {
        content: '';
        position: absolute;
        z-index: 1;
        bottom: -0.15em;
        left: 0;
        width: 0;
        height: 5px;
        background: #f5f5f5;
        transition: width 0.4s ease;
    }

这是jsfiddle：https://jsfiddle.net/sigug/xgphe9j4/

试图做一个带有一些覆盖层的“ toggleClass”，但我不完全确定要在css等中摆脱什么。