<main>

    <div class="menu menu--closed">

        <div class="button">
            <span> </span>
            <span> </span>
            <span> </span>
        </div>

        <div class="tools tools--hidden">
            <!-- Pencil Filled icon by Icons8 -->
            <a href="#">
                <img class="icon pen" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUh
                EUgAAADIAAAAyCAYAAAAeP4ixAAAB9ElEQVRoQ+3agTEEMRQG4P86oAMqQAdK0AE6oAJUQAfogArQgQ7QARUwv0lMvEk22b1N8t/NZWbHubl
                b70veezuTWGBNxmJNHNhAGq7kIYBrAPvubz4AOAfwHsagvCIMnNdtZNI+ARyEGFXISQIQmh4BHPk3FCElCMbPVdlWhYQI1gF/30vU4xeALUV
                IiDgFcOcCfU5gJFMrhvCTzVm3GK4GG8Ff51KokRBx79LJZpPFsGO9KrXfWGH7tLKYM/c84fu7Ss+Roe5kMUOp9wvulVolLdZjsohekBKETyt
                2Ln6eI5VyXVZkDCKskUFE6xWphmgJqYpoBamOaAFpgqgNaYaoCWmKqAVpjqgB6YKYG9INMSekK2IuSHfEHBAJxLIQGcQyECnEVIgcYgpEEjE
                WIosYA5FGlELkESWQlUDkICuDyEHeAOyEWxkFr7O7HQX3mPSR1AYdj7ueAHwAuCw4dMnuO02KbsSXUhBujB0DuHIQf8vvxL27rYSPJwbhzjf
                Tij/tZnEM0h2RqhFf5C8AmGLhsA1AApGCsDYICINk0TPVCPENQAYRgzBIphUHD1JuXPDhyvgGwDqSGbZG2KEuItHxqIsH9Qyex2Byw0Lss4N
                1wuCJ4HGw7LAQphO7FYPn9e/fJGQVHU+sZp+TXkdvG0hqBn4AvSZ7M5+lwqwAAAAASUVORK5CYII=">
            </a>

            <!-- Trash icon by Icons8 -->
            <a href="#">
                <img class="icon trash" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABo
                AAAAaCAYAAACpSkzOAAAA10lEQVRIS+2WURHCMAyGvykAB+AAUMDhAAmgBFACEpCAA7CAAxzAZddyW5auLeOOB9q3rf++P2mzphXxMQaOwDo
                gPQNb4NGHquI+XIBlRCea1VCjpwMsgJuCzYGre9cbtJ4U0CwhyxSJsCS4ejSNfOQpkBxN7fETo5wos7XWBn5rCVvs/zTyWfsljT1bFd2qOi/
                QexQD6/li9P5VytKVYijFQOhE6XTY0BGU3XusO4TVJuTaNPqU7r67A9MmwzLaA7uBRgdAOJ2K0lwRbYBJpqFkctImwngBd3xHGzUO9c8AAAA
                ASUVORK5CYII=">
            </a>

            <!-- Invisible icon by Icons8 -->
            <a href="#">
                <img class="icon hidden" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAC
                AYAAACqaXHeAAAEhklEQVR4Xu2ajZFMQRCA+yJABIgAESACRIAIEAEiQARcBIgAESACRIAIqE9tX8319kxPz3u37mZvqrZu7Xtvuvub/pt5D
                mTPx8Ge2y/nAM49oE3gioh8nxlSKwQeiMhrEXkoIm9mhVADoMar3dNC8ADg9t+cFZ8SQq8HTOsJPTnAOsNUnhD1ATYXTOcJEQAMnhpCD4CpI
                fQCmBZCBsCUELIApoMwAmAEwnURuSkiNFl85y+fcrDnKD8fReTTSbfgowAiCO9E5I6I3BWRWyJycYEhgGC+QxH5tWAe99ElAFoQ1tZT5wMEG
                7P3awlYCuB/QEAmofJs4xWLWKwBoAfCbxHBlb9s/uLKfNdBiJAbGIQM3/lcDqxbDGIUAArbeKx1jK9E5PHgMgGBPMLcLRjAfLKBmxKVBYDhT
                zcK3TarGCXGpYcqeAYg7jcsfCkizzPJMgMABd4WGR0P2DUEbAdkCwJhwY6VkAtHL4AXFTcehYABhIXGPS7M6lHqolE7sLHPMR9h0RwRAFz+Q
                6GoN1kWAitkmyCdFxB4VVTvue9aZNzGC+615msBYHUw3mtiSGwYQbPDQOGricTY0h3jbgTGUQLJRTroCwD7yHmO34FQVp2j22oAyLycCFvjK
                WdcI7740N7qYOW8uKtVh5aN0akT+YjF0UHLzG98aJYumMlZICBs6ecBqCmMEIxX9/xjhFxquFoWQuQFLMxPI19t4RqGeiGyBdYCqClKcuJaO
                SyAKJ9kIUTzRfJr1eIYhFJI9ugrUsBz8QyEpQCQT6WhgtlxBEGFkPA+t250rhEKZayRuNxEY57tgfA1qDxWX3JTbcdZk/dPXwVgk4rq3EpGv
                UlwxBNGk2BG1jEAPFgjhRtR9uywMUYLSnnqHTV5Pxp9gs5ty6CXo7iXskhDFIaA3lBTCmNZlXLY+Ioyd2Z1Ig8gXLWLZF7vfsq4Tdxb92bKI
                AZSS/V1udeS0gxlX6dnk28kt9W9hmVQV6nVUDAJzQbD5gF+B1J2ZCCwIaMf0UEXqP9uNXDYtJWko1YYg7x9uG47VWBpcK0jjKD0QPCStXZ4t
                MbeuQMVhblTrbAqizsBoWx59Rquzm6LhFR2XfxOho02NNmcgB68ti/LHd0p8ol3b4Nlu9ctmVGzoQ/YrFtO5O3uRhJilIg9Oa2dZVdV6gWAc
                rgf1SA6p1NDere2GU+IwojrlFFCs6cpS/83OdwPb/C2nZ5yqdMZM0FPx2hlsurkp+7wy3hAKYwajCAvN3ggiF/yxVol0sog1kmAXatePjwKo
                IxXPCITFsCgfNK/q8J4FokU97WQWp7A/VzvOv/zVmYpgFEQtVjOHq9FHWOYM9YCoIJ6jq4jpXYKYW0AZf+gL0b5a4+oTg2EkwJgDdRXXTQre
                AmjTKBlPiAvkAf0VZqdq6djjAAfXd8VgG6FOm9cDcJZBQCnVSCcZQCrQDjrABZDmAHAIgizABiGMBOAIQizAUhDmBFAC8LWcd2sADwI7ruDm
                QGUEGovTtInQp2d6qm6jb1H9bxgdg8IV+IcQIho8hv23gP+Ak1HM1BAtIt+AAAAAElFTkSuQmCC">
            </a>

            <!-- About icon by Icons8 -->
            <a href="#">
                <img class="icon help" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABo
                AAAAaCAYAAACpSkzOAAABvElEQVRIS6WWjU0DMQyFXyeADaATABMAE1A2gA3oBMAEiAmACYAJoBMAE9BuUCYAfaf4ZB1p4vQsRVf1Yj//PNs
                3UV1OJJ1JOpS0nw5ay3Q+Jb1IWpRMTQovLyRdO8M1lwC+kfSUu5gDwvOHFEHNeO49EV5K4tnLEIgo7iTtboPgdNaS5pIe7T8PRC3eAgCnkt5
                TxDx3Cjp2VwZEkT8CkVBwHDIB6LgARGRTSWsDgjUwKyJHKf9R57B9DhAK3xGEQSQ+spr6FCAoCY1r8pMigSgHtcuD97cA1fKMDnTtGZSIQE2
                jsgCIRturaFBUpCts+s2zxDhvcgnQb9QtqWcpKi16nWIkIgx/uWnB9GhJ3SpaI4DuJV2l6KMEsmR1NYoq9V0eJJCvyLylj/y4aqoPJGqZDB6
                IbqefSuPHInqVNDNllCBFia70Ef2EcJ+R5XsrR16anMnTzzouRad3Qzfo3/Q2ZfYRS2+sEAkMze4jjM8kPY9Eod9weOOGJe8sPppxG1mlVsn
                WzZOBlBFRTjACWXDCCGP/MZTtbHTQ+oh05SLhiwYqc0YJQLZdbd+QW/PQJvUoEJRL33WjjXsDfwxhW4mRFht9AAAAAElFTkSuQmCC">
            </a>

            <!-- Share icon by Icons8 -->
            <a href="#">
                <img class="icon share" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCA
                YAAACpSkzOAAABL0lEQVRIS7WW8Q2BMRBHfyZgFBtgAxsYgQ2wARvYQGzABkZhAvKSNukn2t5VNfnCH5++u+u9npH6raWktaR52PIqaS+JT4
                06cU6SVpm9gO16gMjkXAl40QNEaWYV0K0H6GUp/y+gSTj83b9AEbCRxHfLungyagHEIAbNkHrwCP1/lHQPJSpl8JQ0trR3yQOguRIBOIRnKo
                lgEBboDX9SYS0efAabAgikujgjiwdxIzcg/hCQyYNwb1EmUwafKXpA1JvmaAZ5SgeErNxAMmppBjcwCkuUzJJvq+RICqS94zxCh+w8ov85B2
                5iNudFAkBY/ODJSVlyzT2PiLIGzPnUNI9agD/NowjcVq+FTv8ZTMJ7xkQucIuHrnmUA1k8bGqGb8CSh+72rp156iHvDubRGxwIS/cx30uGAA
                AAAElFTkSuQmCC">
            </a>

        </div>

    </div>

</main>
body{
    background-color: #161616;
}

main{
    max-width: 1080px;
    margin: 0 auto;
    font-size: 16px;
}

.menu{
    position: relative;
    margin: 15em auto 0 auto;
    background-color: #ddb91f;
    width: 70px;
    border-radius: 25px;
    transition: 0.3s border-radius ease-in-out, 0.3s height ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
 }

.menu--closed{
    height: 70px;
}

.menu--open{
    height: 400px;
}

.button{
    transition: 0.3s transform ease-in-out, 0.3s opacity ease-in-out;;
    cursor: pointer;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 2em;
    height: 2em;
    left: 27%;
    top: 20px;
    opacity: 1;
}

.button:hover {
    opacity: 0.6;
}

.button span{
    width: 100%;
    height: 4px;
    background-color: #161616;
    border-radius: 20%;
}

.menu--open .button{
    transform-origin: center;
    transform: rotate(90deg);
}

.tools{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    height: 60%;
    justify-content: space-between;
    transition: 0.3s margin ease-in-out;
}


.tools .icon{
    transition: 0.2s transform ease-in-out;
}

.tools .icon:hover{
    transform: scale(0.8);
}

.tools--hidden{
    margin-top: 400px;
    z-index: -100;
}

.tools--visible{
    margin-top: 40%;
    z-index: 100;
}
$(document).ready(function() {


    var Menu = {

        body: $('.menu'),
        button: $('.button'),
        tools: $('.tools')

    };

    Menu.button.click(function () {
        Menu.body.toggleClass('menu--closed');
        Menu.body.toggleClass('menu--open');
        Menu.tools.toggleClass('tools--visible');
        Menu.tools.toggleClass('tools--hidden');
    });


});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js