Haruni

このブログははてなブログテーマ「Haruni」のデモブログです。読者登録しても更新はありません。

グローバルメニューの設置方法 訂正あり

管理画面>デザイン>カスタマイズ>ヘッダ>タイトル下に以下のコードを追加してください。「URLを入力」のところは
各自のURLに書き換えてください。FontAwesomeを導入していない方は導入して下さい。
最後の閉じるのリストはPC版は非表示ですが、スマートフォンで必要なので最後はそのままにして下さい。

※訂正があります:2018/3/11にグラデーションメニューを導入した方は以下のコードに張り替えて下さい。

FontAwesomeの呼び出し

headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

タイトル下に貼るHTML

<style>
/* ヘッダーの余白調整 */
#blog-title {
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0 1.5rem;
}
@media (max-width: 767px) {
#blog-title {
    padding: 1rem 0;
}
}
</style>
<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="URLを入力">Top</a></li>
		<li><a href="URLを入力">About</a></li>
		<li><a href="URLを入力">Profile</a></li>
		<li><a href="URLを入力">Category</a></li>
		<li><a href="URLを入力">Link</a></li>
		<li><div class="menu-close"><i class="fa fa-window-close fa-fw" aria-hidden="true"></i>閉じる</div></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_close = $body.getElementsByClassName('menu-close')[0];

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

  if ( typeof $menu_close !== 'undefined' ) {
		$menu_close.addEventListener('click', function() {
			$body.classList.remove('menu-active');
		});
	}
})();
</script>

参考リンク:
iOS style sliding menu
JSは↑を参考にこのテーマ用にアレンジしています。