oli

Canvas-off teste00

by olimann

HTML

<body class="page">
    <header> <a class="btn"><span>Menu</span></a>

        <div class="pannel">
            <ul class="nav">
                <li><a href="#">Home</a>

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

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

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

                </li>
            </ul>
        </div>
    </header>
    <div class="content">
        <div class="container">
            	<h1>Quam quidem partem<h1/>
        <p><a href="http://www.google.fr">lien</a><br/>
        Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
        </p>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        
        <h1>Quam quidem partem<h1/>
        <p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod...

CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    left: 0;
}
.btn.action {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
.btn {
    display: inline-block;
    padding: 10px;
    background: blue;
    cursor: pointer;
    z-index: 3000;
    position: fixed;
    top: 20px;
    left: 20px;
    transition: transform .5s ease;
    -moz-transition: -moz-transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
    -o-transition: -o-transform .5s ease;
}
.pannel {
    position: fixed;
    width: 50%;
    height: 100%;
    background: red;
    left: -50%;
    display: table;
    text-align: center;
}
.nav {
    display: table-cell;
    vertical-align: middle;
}
.container {
    margin: 0 auto;
    padding: 80px 0;
    text-align: justify;
    max-width: 80%;
}
.content {
    background: yellow;
}
.content p {
    font-size: 20px;
    font-weight: normal;
}
.content h1 {
    font-size: 50px;
    font-weight: bold;
    margin: 20px 0 20px;
    text-align: left;
}
/*version css transition*/
 .panOpen {
    left: 0%;
}
.bodyOpen {
    left: 50%;
}
.pannel, .page {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

JavaScript

var toggle = false;
var isOpen = false;
var overBloc = $(".pannel");
var overBody = $("body");
var btnPanel = $(".btn");

btnPanel.click(function () {
    if (toggle == false && isOpen == false) {
        openMenu();
    } else {
        if (toggle == true && isOpen == true) {
            closeMenu();

        }
    }
});


//click body close
$('.content').click(function (e) {
    if (toggle == true && isOpen == true) {
        btnPanel.removeClass('action');
        closeMenu();
        e.stopPropagation();

    }
});



//resize close
$(window).resize(function () {
    if (toggle == true) {
        btnPanel.removeClass('action');
        closeMenu();
    }
});


function openMenu() {
    toggle = true;
    isOpen = true;
    overBody.toggleClass('bodyOpen');
    overBloc.toggleClass('panOpen');
    btnPanel.addClass('action');
}

function closeMenu() {
    toggle = false;
    isOpen = false;
    $('.pannel, body').removeClass('panOpen bodyOpen');
    btnPanel.removeClass('action');
}