• HTML
• CSS
• JS

HTML

<div class="menu-bar">
    <div class="mb-line-1"></div>
    <div class="mb-line-2"></div>
    <div class="mb-line-3"></div>
</div>

<div class="frase">
    <p>"Por entre la multitud va la esteta juventud de pensadores vencidos y de eternos soñadores de los frutos prohibidos."</p>
    <span>Abraham Valdelomar</span>
</div>

CSS

body{
    background:#3498db;
    font-family:arial;
}
.menu-bar{
    width:2em;
    cursor:pointer;
    margin:2em auto;
}
.mb-line-1,.mb-line-2,.mb-line-3{
    width:100%;
    height:0.2em;
    background:white;
    border-radius:1px;
    transition:all 0.3s;
}
.mb-line-2{
    padding:0rem;
    margin:0.3em 0em;
}

/* animación */

.show .mb-line-1{
    transform:rotate(45deg) translate(5px,5px);
}
.show .mb-line-2{
    opacity:0;
}
.show .mb-line-3{
    transform:rotate(-45deg) translate(6px,-7px);
}

/* mostrar frase */

.frase{
    width:auto;
    height:auto;
    padding:2rem;
    background:#fff;
    font-size:2rem;
    display:none;
}
.frase.show{
    display:block;
}
.frase>span{
    font-weight:600;
    text-align:right;
    display:block;
}

JS

const elem  = document.querySelector('.menu-bar');
const frase = document.querySelector('.frase');

elem.addEventListener('click',function(){
   elem.classList.toggle('show');
   frase.classList.toggle('show');
});