HTML

<div class="parent_block">
 <div class="menu-icon">
  <img src="/<!--путь_до_иконки-->/menu.svg" />
 </div>
 <!--Раскрывающийся блок содержащий пункты меню-->
 <div class="toggled_block">
  <nav>
   <a href="#">Главная</a>
   <a href="#">Проекты</a>
   <a href="#">Услуги</a>
   <a href="#">Цены</a>
   <a href="#">Блог</a>
  </nav>
 </div>
</div>

CSS

.parent_block {
 width: 200px;
 position: fixed;
 top: 0;
 right: 0;
 z-index: 2;
 right: 0;
}
.toggled_block {
 display: none;
 height: 50px;
 background: #300;
 z-index: 3;
}
.toggled_block nav a {
 width: 100%;
 float: left;
 clear: both;
 text-align: left;
}
@media all and (min-width: 650px) {
 .parent_block {
  display: none;
 }
}

JavaScript

$(".menu-icon").click(function() {
 $('.toggled_block').toggle();
});
$(document).on('click', function(e) {
 if (!$(e.target).closest(".parent_block").length) {
 $('.toggled_block').hide();
}
e.stopPropagation();
});
// Скрываем блок при скролле
$(document).bind('scroll',function (e) {
 var container = $(".toggled_block");
 if (container.has(e.target).length === 0){
  container.hide();
 }
});