読者です 読者をやめる 読者になる 読者になる

らいおんカーニバル

~会社に行かない暮らしを始めるために~

【備忘】Brooklynのグローバルナビの設置 はてなブログ

スポンサーリンク
 

f:id:goodman-1qaz:20170314013229p:plain

 

グローバルナビとはこの赤で囲んでいる画面上のメニューバーの事です。

今回はこのメニューバーを編集するお話しです。

 

 

コピペさせて頂いたコードはこのサイトに載っていました。

とても簡単でわかりやすく書いて頂いていたので感謝感謝。

Brooklynを作った方の記事なので、信頼も抜群ですね。

このデザイン本当にシュッとしてて好きで、はてなブログを開始した時から使わせて頂いています。感謝感謝。

shiromatakumi.hatenablog.com

 

読んでそのままコピーしただけで、今のグローバルナビにできました。

 

スマホ版の画面もレスポンシブにしちゃいましたよ。

スマホ版は画面下に固定のメニューバーを付けていたんですが、

「この際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> 

 

簡単でわかりやすいですよね。本当に感謝です。