Saliendome un poco de Bootstrap podría darte una alternativa, ahora bien. Ésta alternativa no es optimizada, pero igual puedes adaptarla.
https://codepen.io/anon/pen/weBPLb
El menú está vertical y es accesible desde un botón para que aparezca / desaparezca.
HTML
<div class="menu">
<div class="insider">
<h5 class="text-center">Menú de navegación</h5>
<ul class="items">
<li class="item">
<a href="#" class="btn btn-primary form-control">Inicio</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Item 2</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Item más largo</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Item aún más largo</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Otro item</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Ésto no acaba</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Hasta cuando</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Deténte</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Super increíble</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Oh my God!</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Save us</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Save us</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Save us</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">NOW!</a>
</li>
<li class="item">
<a href="#" class="btn btn-primary form-control">Último y más largo ítem</a>
</li>
</ul>
</div>
</div>
<div class="container">
<button class="btn btn-danger abrirMenu form-control">Abrir / Cerrar</button>
</div>
CSS
.menu{
opacity: 0;
position: fixed;
top: 0;
left: 0;
background-color: #0275d8;
padding: 12px;
z-index: 999;
}
.menu .insider{
width: 100%;
height: 100%
background-color: #0275d8;
}
.menu .insider h5{
color: #1591ff;
}
.menu .insider ul.items{
display: block;
font-size: 0;
margin: 0;
padding: 0;
width: 100%;
overflow-y: auto
}
.menu .insider ul.items .item{
display: block;
font-size: 16px;
margin-bottom: 5px;
}
jQuery / JavaScript
$(document).ready(function() {
var ven = $(window);
var inn = $(".menu .insider");
var abierto = false;
$(".menu").css({
"width": 240,
"height": ven.height()
});
$(".menu .insider ul.items").css({
"height": (ven.height() - 24) - $(inn).find('h5').height()
});
$(".menu").css({
left: ($(".menu").width() * -1) - 100
});
function an(){
if (!abierto){
abierto = true;
$(".menu").animate({
display:'block',
opacity:1,
left: 0
}, 1000, "easeOutExpo");
}else{
abierto = false;
$(".menu").animate({
display:'',
opacity:'',
left: ($(".menu").width() * -1) - 100
}, 1000, "easeOutExpo");
}
}
$(".abrirMenu").on('click', function(event) {
an();
});
ven.resize(function(){
$(".menu").css({
"width": 240,
"height": ven.height()
});
$(".menu .insider ul.items").css({
"height": (ven.height() - 24) - $(inn).find('h5').height()
});
});
});
NOTA: Yo uso jQuery 3, jQuery UI & Bootstrap 4 en éste ejemplo.
Adicionalmente: Si te gustan las animaciones y quieres saber más de ellas en jQuery UI hay muchas más: https://api.jqueryui.com/easings/
Espero pueda servirte.