• 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>“ Tengo deberes sagrados que cumplir y los cumpliré hasta quemar el último cartucho ”</p>
    <span>Francisco Bolognesi</span>
</div>

CSS

body{
    background:darkslateblue;
    font-family:arial;
}
.menu-bar{
    width:2em;
    cursor:pointer;
    margin:2em;
}
.mb-line-1,.mb-line-2,.mb-line-3{
    width:100%;
    height:0.2em;
    background:white;
    border-radius:1px;
    transition:all 0.5s;
}
.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

$(function(){
    
    var elem = $(".menu-bar");
    
    elem.on("click",function(){
        elem.toggleClass("show");
        $(".frase").toggleClass("show");
    });
    
});