<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');
});
});
This Pen doesn't use any external CSS resources.