グローバルメニューの設置方法

タイトル下HTML＆JSコード

デザイン→カスタマイズ→タイトル下に以下を貼り付けて下さい。リンク先URLの#やメニュー項目のTOPなどは各自変えて下さい。

<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="#">Top</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Profile</a></li>
		<li><a href="#">Category</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

	if ( typeof $menu_trigger !== 'undefined' ) {
		$menu_trigger.addEventListener('click', function() {
			$body.classList.toggle('menu-active');
		});
	}

})();
</script>

ドロップダウン

メニューをドロップダウンにするときは

<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="#">Top</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Profile</a></li>
                 <!-- ドロップダウン始まり -->
		<li><a href="#">Category</a>
		<ul>
		    <li><a href="#">Sub-Category</a></li>
		    <li><a href="#">Sub-Category</a></li>
		</ul>
		</li>
                 <!-- ドロップダウン終わり -->
		<li><a href="#">Link</a></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

	if ( typeof $menu_trigger !== 'undefined' ) {
		$menu_trigger.addEventListener('click', function() {
			$body.classList.toggle('menu-active');
		});
	}

})();
</script>

このようにして下さい。スマートフォンではドロップダウンの2階層目は表示されません。

参考：iOS style sliding menu
こちらのスライドメニューを参考にはてなブログ用にアレンジしました。