Menu atras

by Felype Rennan

HTML

<div class="menu-atras">
    <ul class="menu">
        <li class="titulo">Um menu</li>    
        <li>Hue</li>    
        <li>Hue</li>    
        <li>Hue</li>   
        <li>BR?</li>   
        <li>BR?</li>    
    </ul>
    <div class="conteudo">
        <div class="moldura-8">
            <p>O dia do botao</p>
            <p>é também o dia da navegação</p>
            <button class="abrir-menu">Botão</button>
            <p>Quando a gente clica num botão</p>
            <p>A gente vê uma figura oculta</p>
            <p>Que é um menu atrás.</p>
        </div>
    </div>
</div>

CSS

/* para teste :v */
* {
    margin: 0; padding: 0;
}
body {
    font-family: "Lucida Sans", sans-serif;
}
p {
    margin-bottom: 4px;
}
/* Daqui pra baixo é o componente em si.
    .menu-atras 
        > menu
        > conteudo
            abrir-menu
/* ---------------------- */
.menu-atras {
    position: relative;
    overflow: visible;
}
.menu-atras > .menu {
    background: #012;
    z-index: 3;
    position: absolute;
    height: 100%;
    width: 300px;
    overflow: auto;
}
.menu-atras > .menu > li:not(.titulo) {
    padding: 8px;
    margin: 4px; 
    border: 1px solid #00829D;
    color: #eee;
    cursor: pointer;
}
.menu-atras > .menu > li:not(.titulo):hover {
    background: #00829D;
    color: white;
}
.menu-atras > .menu > .titulo {
    padding: 8px;
    margin: 4px; 
    margin-bottom: 0;
    background: #012;
    color: white;
    font-weight: 500;
    font-size: 1.2em;
}

.moldura-8 {
    padding: 8px;
}

.menu-atras > .conteudo {
    transition: 1s ease-in-out;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5;
    position: relative;
    background: white;
    width: 300px;
    border: 1px solid transparent;
}
.menu-atras .abrir-menu {
    display: inline-block;
    min-width: 32px;
    padding: 8px 14px;
    background: #00829D;
    border: 1px solid white;
    color: white;
    outline: none;
    cursor: pointer;
}

.menu-atras.abrir > .conteudo {
    transform: translateX(300px) translateY(4px) scale(1.01);
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

JavaScript

/*$(".menu-atras").find(".abrir-menu").each(function() {
    $(this).click(function(e) {
        var v = $(this).parent();
        while(v !== undefined) {
            console.log('aa');
            if(v.hasClass("menu-atras")) {
                v.toggleClass("abrir");
                break;                
            }
            v = v.parent();
        }
    });
});*/

$(".menu-atras .abrir-menu").click(function(e) {
    $(this).closest(".menu-atras").toggleClass("abrir");
});

/* Valeu Anderson Ravagnani Mamede */