OFF CANEVAS

teste

by olimann

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<!-- responsive -->
<a class="btnOpen"><i class="icon-reorder icon-1x"></i></a>

<!-- pannel -->
<div class="pannel pannel-push"> 

    <div id="intro" class="collapse">
        <nav>
            <ul>
                <li><a href="#">Home</a>

                </li>
                <li><a href="#">About</a>

                </li>
                <li><a href="#">Work</a>

                </li>
                <li><a href="#">Clients</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </nav>
    </div>
</div>
<div class="warpPage">
    <div class="container">
        <p>On dirait que les joueurs PlayStation qui ont adopté - massivement - la PS4 ne sont pas trop gênés par le passage du multijoueur à un modèle payant, puisque le nombre d'abonnés au PS 
<br /><br /> <br /><br /><br /><br /><br /><br /><br /> Plus se révèle être important si l'on en croit les colonnes de nos confrères de C'est lors de la conférences d'annonce des bénéfices de Sony que son actuel PDG, Kaz Hirai, a révélé que plus de la moitié des 4,2 millions de propriétaires de la PS4 se sont abonnés au PlayStation Plus. Ce qui fait plus de 2 millions d'abonnés pour le réseau de Sony et ce juste avec les utilisateurs de la dernière<br /><br /> <br /><br /><br /><br /><br /><br /><br /> console, preuve s'il en est que les avantages liées au PS Plus, comme les jeux gratuits, ont réussi a compenser le prix de l'abonnement. D'ailleurs, on compte désormais plus de 150 millions de comptes PSN enregistrés à ce jour, avec de plus en plus d'inscriptions depuis le lancement de la PS4.</p>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/*boutons*/
 .btnOpen {
    position: fixed;
    top: 30px;
    left: 30px;

    background: black;
    outline: none;
    cursor: pointer;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    color: white;
    z-index:2000;
}
.btn-topnav {
    display: none;
    padding: 20px;
}
.pannel .btnClose {
    right: 20px;
    top: 20px;
}
.warpPage .btnOpen {
    left: 20px;
    top: 20px;
}
#intro {
    background: yellow;
    display: block;
}
html, body {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
}
.container {
    min-height: 1000px
}

/*position origine*/
 .warpPage {
    overflow-x: hidden;
   min-height: 100%;
    background: white;
    position: relative;
    top: 0;
    left: 0;
    transition: all 0.5s ease 0s;
}
/*position open*/
 .warpPage.warpPage-push {
    top: 150px;
    
}
/*ceation du overlay*/
 .warpPage::after {
    content:'';
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: black;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
/*overlay open*/
 .warpPage.warpPage-push::after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    
}
/* menu pannel*******************/
 .pannel {
    position: fixed;
    width: 100%;
    height: 150px;
    left: 0;
    background: pink;
    z-index: 2;
}
/*position origine*/
 .pannel-push {
    top: -150px;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    -webkit-transition: all 0.5s, visibility 0s 0.5s;
    transition: all 0.5s, visibility 0s 0.5s;
    transition: all 0.5s ease 0s;
}
/*position open*/
 .pannel-push.open {
    visibility: visible;
    top: 0;
}

JavaScript

var $btnOpen = $(".btnOpen");
var $pannel = $(".pannel");
var $warpPage = $(".warpPage");
var toggle = false;
var isOpen = false;





$btnOpen.click(function () {
    if (toggle == false && isOpen == false) {
        $(this).addClass('action');
        openMenu();


    } else {
        if (toggle == true && isOpen == true) {
            $(this).removeClass('action');
            closeMenu();
        }
    }
});

function openMenu() {
    $pannel.addClass('open');
    $warpPage.addClass('warpPage-push');
    toggle = true;
    isOpen = true;


}

function closeMenu() {    
     $pannel.removeClass('open');
    $warpPage.removeClass('warpPage-push');

    
    toggle = false;
    isOpen = false;


}



$(window).resize(function () {
    if (toggle == true) {
        closeMenu();
    }
});



$(window).resize(function () {
    $('.in').collapse('hide');
});


//var $window = $(window);
//$window.on('resize', function(){
//  closeMenu();    
//}).trigger('resize');