【備忘】Brooklynのグローバルナビの設置 はてなブログ
グローバルナビとはこの赤で囲んでいる画面上のメニューバーの事です。今回はこのメニューバーを編集するお話しです。
コピペさせて頂いたコードはこのサイトに載っていました。とても簡単でわかりやすく書いて頂いていたので感謝感謝。Brooklynを作った方の記事なので、信頼も抜群ですね。
このデザイン本当にシュッとしてて好きで、はてなブログを開始した時から使わせて頂いています。感謝感謝。
読んでそのままコピーしただけで、今のグローバルナビにできました。
スマホ版の画面もレスポンシブにしちゃいましたよ。
スマホ版は画面下に固定のメニューバーを付けていたんですが、「この際Brooklynに染まろう」と決意してレスポンシブデザインモードにしました。
スマホ版の固定メニューバーの付け方はこの記事を参考にして下さい。簡単にできます。
コードも貼っておきます。
参考までに、僕の今のコードを貼っておきます。
「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」は今こんな感じになっています。
<div id="trigger-point">
</div>
<div id="global-menu">
<div id="mobile-head">
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="global-menu-list">
<li><a href="http://www.income-carnival.com/archive/category/LINE%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%97">LINEスタンプ</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E6%8A%95%E8%B3%87">投資</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E5%9B%B3%E6%9B%B8%E9%A4%A8">図書館</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E4%BC%91%E6%86%A9%E6%89%80">休憩所</a></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
};
$(window).scroll(fixedNav);
$('body').on('touchmove', fixedNav);
// Toggle メニューの設定
$('#nav-toggle').click(function (){
$nav.toggleClass('open');
});
$('#content').click(function (){
if($nav.hasClass('open')){
$nav.removeClass('open');
}
})
});
</script>
長いですが、コピペした後に自分でいじらないといけないのは、
下記コードの赤と青の箇所です。
赤の所には自分の記事カテゴリーのリンクを貼ります。
青の所にはメニューバーに表示させたいタイトル書きます。
<li><a href="http://www.income-carnival.com/archive/category/LINE%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%97">LINEスタンプ</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E6%8A%95%E8%B3%87">投資</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E5%9B%B3%E6%9B%B8%E9%A4%A8">図書館</a></li>
<li><a href="http://www.income-carnival.com/archive/category/%E4%BC%91%E6%86%A9%E6%89%80">休憩所</a></li>
</ul>
簡単でわかりやすいですよね。本当に感謝です。
