Боковая слайд-панель

Вставляем блок с панелью в самое начало верстки — после body.
Если есть приклеенный к низу Footer и для него div «main» — и перед ним). Если на сайте реализован Параллакс эффект заднего фона, то вставляем после него

<div style="overflow-x: hidden; min-height: 100%;">
<div id="sidebar">
<div id="open-sidebar"><i class="fa fa-bars"></i>

<div id="sidebar-content">

</div>
</div>

!Незабываем в подвале закрыть первый div после закрытия div «main»

CSS

/* Боковой slide-блок */

#slidebar {
    float: left;
    position: relative;
    background-color: limegreen;
    margin-left: -270px;
    transition: margin-left 0.5s;
    -webkit-transition: margin-left 0.5s ease 0s;
}

	  
#slidebar-content {
    background-color: #111;
    min-height: 100%;
    width: 270px;
    position: fixed;
    z-index: 999;	
 /*для возможности прокрутки*/ 
    top: 0;
    bottom: 0;
    overflow-x: hidden;
}	  
	  
   
#open-slidebar {
    position: fixed;
    top: 50px;
    left: 0px;
    background-color: coral;
    padding: 8px;
    cursor: pointer;
    z-index: 999;
    color: #fff;
    font-size: 20px;
	transition: color 0.5s, background-color 0.5s, margin-left 0.5s,;
    -webkit-transition: color 0.5s ease 0s, background-color 0.5s ease 0s, margin-left 0.5s ease 0s; 
}

.open {margin-left: 0px !important;}
.open2 {margin-right: -270px !important; margin-left: 270px !important;}
.open4 {margin-left: 270px!important;}


#open-slidebar:hover {
background-color: #fff;
color: coral;
}

Варианты скрипта для раскрытия боковой панели + смещение основного блока (можно и без этого, тогда панель будет выдвигаться без смещения самого сайта)

$(document).ready(function() { 
  
  //Открытие боковой slide-панели при нажатии на кнопку + смещение основного блока 
  
  $('#open-slidebar').click(function() {
  $('#slidebar').toggleClass('open');
  $('.main').toggleClass('open2');  
  });  
  
});

Запоминание в cookies состояние — выдвинута панель или нет при навигации по сайту

$(document).ready(function() {

    var body_class = $.cookie('leftpannel');
    var body_class2 = $.cookie('leftpannelmain');
    var body_class3 = $.cookie('leftopenbut');
    if(body_class) {
        $('#slidebar').attr('class', body_class);
	$('.main').attr('class', body_class2);
	$('#open-slidebar').attr('class', body_class3);
    }
    $('#open-slidebar').click(function() {
	    $('#slidebar').toggleClass('open');
	    $('.main').toggleClass('open2');
	    $('#open-slidebar').toggleClass('open4');
        $.cookie('leftpannel', $('#slidebar').attr('class'), { expires: 1, path: '/' });
	$.cookie('leftpannelmain', $('.main').attr('class'), { expires: 1, path: '/' });
	$.cookie('leftopenbut', $('#open-slidebar').attr('class'), { expires: 1, path: '/' });
    }); 

});

$(document).ready(function() {   
  
  //Открытие боковой slide-панели при наведении курсора на кнопку + смещение основного блока 
  
  $('#slidebar').mouseover(function() {
  $('#slidebar').addClass('open');
  $('.main').addClass('open2');  
  });   
  
  $('#slidebar').mouseout(function() {
  $('#slidebar').removeClass('open');
  $('.main').removeClass('open2');  
  });  
  
});