cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fancy Toggle Menu - By Florian Guiffrey</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>


<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>



<!--On inclue le Jquery puis le JS-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>
            
          
!
            
              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');
    });


});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console