こんにちは！霙(@xxmiz0rexx)です。今年に入ってから急に人気を博しだした当ブログSPテーマで使用しているカテゴリメニュー。
シンプルすぎて不要なJSまでコピペする方が続出しているので記事にしましたｗ

どんな動きなの

DEMOページを用意しましたので触ってみてください。ページ上部からメニューがにゅっと出て、閉じるとにゅっと引っ込みます。
DEMOページへ

ちなみにjQueryの「slideToggle」を使っただけで特別なことは何にもしてないです。

実装方法

<nav class="global_menu">
	<ul>
		<li><a href="#">XXX</a></li>
		<li><a href="#">XXX</a></li>
		<li><a class="slide_btn">Category</a></li>
	</ul>
</nav>
<!-- /.global_menu -->

<nav id="category_list">
	<ul class="lists clearfix">
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
		<li><a href="#">cat</a></li>
	</ul>
	<p class="list_close slide_btn">▲ close ▲</p>
</nav>
<!-- /#category_list -->

#category_list{
	display:none;
	width:100%;
 	position: fixed;
	z-index:999;
	top: 0px;
	left: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

にゅっと出るメニューはCSSで非表示にしておきます。（見づらくなるので装飾のCSSは省略してます。
装飾も参考にしたい場合はDEMOページのソースを見て下さい。）

※追記（2014/01/23）
jQuery1.9〜だと若干動きが変だったのですが、@yuki_naka18さんが調べて下さり、#category_listにbox-sizing:border-box;を指定することで解決することがわかりました :)
DEMOページではページ全体にかけました。

$(function(){
	$(".slide_btn").click(function(){
		$("#category_list").slideToggle(200);
	});
});

.slide_btn

メニューを呼び出すボタンです。class名はお好きに変更してください。ページに何個あってもOKです。

うちのブログではグローバルナビとメニューのcloseボタンにこのclassをつけています。共通で使いたいのでこのclassにはCSSを設定してません。

#category_list

にゅっと出したいメニューです。ID名は好きに付けてください。

slideToggle(200)

にゅっのスピードを変更できます。数値を調整して好きなスピードにしてください。

さいごに

jQueryはまだまだ初心者レベルにも達してないので偉そうにこんな記事かけない身なのですが、今回は色々あったので緊急で書かせて頂きました。

簡単なメニューを表示したい時などに使ってみてくださいね :)
以上、霙でした！