jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#popup"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

vh-vw это просто единицы измерения.

.element{
margin-top: calc(50vh-n) // n - тут не прокатит, это переменная, её нельзя пропихнуть в css
}

это css, в нём особо не покодишь, переменных тут нет, если не использовать препроцессоры.
нужно использовать js, и непосредственно js`ом работать с размерами.
используя библиотеку jquery, например
var h = $('#container').css('height');

<div class="menu">
    <div class="menu__icon">
                   <span class="menu__icon-span1"></span>
                   <span class="menu__icon-span2"></span>
                   <span class="menu__icon-span3"></span>
               </div>
         </div>
</div>

то что нужно?
естественно, как сказали выше, многое придется дописать
ссылка