Menu side left - Animate atrasado

Menu side left - Animate atrasado

by Angelo Rogério Rubin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="header">
    <div class="btn-menu-left"></div>
</div>

<div class="menu-left">
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
    </ul>
</div>

<div class="conteudo">
    <div class="recebe_tabs">OLÀ</div>
    <div class="painel-right">OLÀ2</div>
</div>

CSS

body{margin:0;padding:0;overflow-x:hidden;font-family: Verdana}

.recebe_tabs{
    border:1px solid #c12;
    width:78%;
    padding-bottom:50%;
    float:left;
}

.painel-right{
    border:1px solid blue;
    width:20%;
    padding-bottom:50%;
    float:right;
}

.header {
    border:1px solid #bbb;
    width:100%;
    padding-bottom:0.2%;
    background-color:#e8e8e8;
    overflow:hidden;
}

.btn-menu-left {
    width:45px;
    height:45px;
    background-color:#000000;
    margin:2 0 0 3;
    cursor:pointer;
}

.btn-menu-left:hover{
    background-color:#c12;
}

.menu-left {
    width: 35%;
    display: none;
    border: 1px solid black;
}

.conteudo {
    width:100%;
    height:93%;
    background-color: #bbb;
    float: left;
}

/*dentro do menu*/

.menu-left ul{text-align:center;padding:0 1 0 0;margin:0 0 0 0;cursor:pointer;}

.menu-left li {
    list-style:none;
    line-height:3;
    border:1px solid #000000;
    display: block;
}
.menu-left li:hover{color:#FFFFFF;background-color:#c12;}

JavaScript

$('.btn-menu-left').on('click', function (e) {
    e.stopPropagation();
    // Set the effect type
    var effect = 'slide';
    // Set the options for the effect type chosen
    var options = { direction: 'left' };
    // Set the duration (default: 400 milliseconds)
    var duration = 1000;
    $('.menu-left').toggle(effect, options, duration);
});

$('.menu-left').on('click', function(e){
    e.stopPropagation();
});

$(document).on('click', function () {
    $('.menu-left').hide('slide', {direction: 'left'}, 1000);
});