PCではドロップダウン、スマートフォンではアコーディオンメニュー

JavaScript

参照：http://ascii.jp/elem/000/000/871/871147/
配布元：http://jasonweaver.name/lab/flexiblenavigation/

jQueryプラグインなので、設置はわりと慣れてるといえば慣れてるのではないかと。
手順としては、

  • jQueryとflexnavへのリンク
  • CSSへのリンク
  • ulタグにクラス指定（flexnavと指定するのが無難か）
  • 実行

こんな感じ。
具体的には、HTMLを

<div id="navi" class="clearfix">
	<div class="menu-button">MENU</div>
	<ul class="flexnav" data-breakpoint="760">
		<li id="nav_1"><a href="#">カテゴリ１</a>
			<ul>
				<li><a href="#">コンテンツ１</a></li>
				<li><a href="#">コンテンツ２</a></li>
			</ul>
		</li>
		<li id="nav_2"><a href="#">カテゴリB</a>
			<ul>
				<li><a href="#">コンテンツA</a></li>
				<li><a href="#">コンテンツB</a></li>
				<li><a href="#">コンテンツC</a></li>
			</ul>
		</li>
		<li id="nav_3"><a href="#">カテゴリc</a>
			<ul>
				<li><a href="#">コンテンツa</a></li>
				<li><a href="#">コンテンツb</a></li>
				<li><a href="#">コンテンツc</a></li>
				<li><a href="#">コンテンツd</a></li>
			</ul>
		</li>
	</ul>
</div>

としたときに、BODYタグ終了前に

<script>
$(function(){
	$(".flexnav").flexNav();
});
</script>

とする。
class:menu-buttonはスマートフォン用。PC時では表示されない。
data-breakpointはウィンドウ幅がこれ以下になったときにスマートフォン用表示に切り替える。