Адаптивное меню

Добрый день.

Помогите с меню решить проблему.
Есть собственно меню, на экранах от 791px оно горизонтальное — работает нормально
На экранах 790px и меньше -меню скрывается под кнопку.

<div id="top">
<div id="navi">
<a id="touch-menu" class="mobile-menu" href="#"><img src="/rht/img/icon-menu.png" alt="" /></a>

		<nav>
		<ul class="menu">
		<li class="current"><a href="#home">1</a></li> 
                <li><a href="#service">2</a></li>
                <li><a href="#about">3</a></li>
                <li><a href="#price">4</a></li>
                <li><a href="#reviews">5</a></li>
                <li><a href="#news">6</a></li>
                <li><a href="#contacts">7</a></li> 
		</ul>
		</nav>
</div>
</div>

Дальше код JQuery

$(document).ready(function(){ 
	var touch 	= $('#touch-menu');
	var menu 	= $('.menu');

	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
	
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});

Проблема появляется на смартфонах.
При нажатии кнопки «меню» выпадает список пунктов меню, после выбора любого пункта, меню не сворачивается само.

Посоветовали дописать код JQuery:

$('.menu-icon').click(function() {
                $('.menu').toggle(0);
        });
        $('.menu').click(function() {
                $('.menu li').fadeOut(0);
        });

После этого на смартфонах проблема указанная выше исчезла, но появилась на больших экранах (когда меню не скрывается под кнопку, то есть оно горизонтальное), теперь при клике по пункту меню — все меню исчезает.

Я ноль в JS и JQuery, по этому не могу решить проблему сам, прошу помощи помочь мне.

$('a','.menu').click(function() {
	var w = $(window).width();
	if(w < 790) {
		$('.menu').toggle(0);
	}
});