どもです。

スマホサイトを作るにあたって、注意しなければならないのがヘッダー、特にグローバルナビゲーションだと思います。

PCサイトだとヘッダーに情報量が多くてもそこまで支障はありませんが（僕はヘッダーに情報を詰めるの嫌いですが）、スマホサイトで同じことやるとファーストビューがヘッダーのみ、しかも何度かスクロールして漸く本文が出てくるような惨状になります。
直帰率100%は免れません。

ということで、グローバルメニューも常時は隠し、クリックしたらオープンする仕組みにしたい。

で、それを実現するためのjQueryって実はかなり簡単という話です。

$(document).ready(function(){
	$(ボタン).click(function(){
		$(ナビゲーション).slideToggle('slow');
	});
});

たったこれだけです。(ﾟ∀ﾟ)(ﾟ∀ﾟ)

slideToggleがかなり便利でして、これを使うことで記述量は半分以下になります。

slideToggleはslideDownとslideUpを交互に行ってくれるものです。
display:noneならslideUpを、そうでなければslideDownを適用してくれるので、スイッチ用の変数も不要です。

CSSはお好みで。
但し、レスポンシブサイトの場合、ナビゲーションを隠さないサイズの場合に、
ナビゲーション{ dispyay:block  !important;}
をお忘れなきよう。
これがないと、スマホサイズのときにslideDownされたものがPCサイズになっても復活しないのでｗ

ちなみに、ナビゲーションのボタンをnav:before等で設置すると余分なHTMLを書かなくて良いので良い感じです。
しかしjQueryでは:beforeにイベントを設置することはできないので、nav全体にイベントを設置することになると思います。
その場合、リンクを押したとき一瞬ナビゲーションが閉じてしまうので、それを避けるために、

$(document).ready(function(){
    $("nav").click(function(){
        $("nav ul").slideToggle('slow');
    });
    $("nav ul").click(function(e){
        e.stopPropagation();
    });
});

とかやっておくと良い感じだと思います。