offcanvas example

by Christian Bonato

HTML

<!doctype html>
<html lang="en">
<html>
<body>
        <ul class="menu">
        <li><a id="home" href="#">Home</a></li>
        <li><a id="about-me" href="#">About Me</a></li>
    </ul>

<div class="panel">
    <div class="home">
    <span class="close">X</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
    </div>
    </div>

CSS

div.panel {
  display:none;
  position: absolute;
  top: 0;
  width:100%;
  right:0%;
  height: 100%;
  z-index: 3;
  margin: 0;
  overflow:hidden;
    background-color:black;
}
div.home {
    display:none;
    font-family:arial;
    color:white;
    padding:50px;
    overflow:hidden;
}
span.close {
    position:absolute;
    right:30px;
    top:35px;
    cursor:pointer;
}

JavaScript

$(document).ready(function() {
    $('#home').on('click', function() {
        $('div.panel').animate({
            'width': 'show'
        }, 300, function() {
            $('div.home').fadeIn(500);
        });
    });



    $('span.close').on('click', function() {
        $('div.home').fadeOut(500, function() {
            $('div.panel').animate({
                'width': 'hide'
            }, 300);
        });
    });
});