地方在住徒然日記☆

ゆる~りと趣味や生活のことをかいていきま~す

初心者必見 グローバルメニュー設置


スポンサードリンク

こんにちは、ななです。

 

ブログを読んでると、ヘッダーにメニューがあって見やすいなーって思ってました。

てことで、グローバルメニューを設置しました。

ようやくできました!!!

ようやくというのは、一度設置したんですが、上手くいかなくて放置してました。

今回、友人のアドバイスにより、上手く表示ができたので、備忘録として残しておきます。

 

グローバルメニューとは?

手順

 

グロバーバルメニューとは?

サイトの上部にあるカテゴリー名を表示しているバーです。

これがあるかないかで、サイトの見やすさが全然違います。

興味があるジャンルにすぐに飛べるので、サイトの特徴もわかりやすいです。

まだ設置してない人は、いますぐにでも設置することをお勧めします★

 

手順

www.notitle-weblog.com

SHIROMAさんのブログを参考にさせてもらいました。

ありがとうございます。

  • デザイン→カスタマイズ→ヘッダ→パンくずリストにチェックを付ける
  • PCとスマホはレスポンシブ対応にしておいてください。
  • 記事の管理でカテゴリーを作る。

私の場合は趣味というカテゴリーの中にボードゲーム、ハンドメイド、将棋とありますが、まずは、

大元のカテゴリー趣味を作り、

趣味ーボードゲーム、趣味ーハンドメイド、趣味ー将棋と作ります。

記事にカテゴリーを振り分けます。例えばボードゲームの記事には、趣味と趣味ーボードゲームの二つのカテゴリーを設定します。ここはかなり重要なので、間違えないように気を付けましょう。

この後、上記のブログのコードを使わせてもらいます。

<!-- グローバルナビ -->
<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 sub-list">
<li><a href="ここにリンク先のURL">項目</a>
<ul class="sub-item">
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
</ul>
</li>
<li><a href="ここにリンク先のURL">項目</a>
<ul class="sub-item">
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
</ul>
</li>
<li><a href="ここにリンク先のURL">項目</a>
<ul class="sub-item">
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
<li><a href="ここにリンク先のURL">項目(サブ)</a></li>
</ul>
</li>
<li><a href="ここにリンク先のURL">項目</a></li>
<li><a href="ここにリンク先のURL">項目</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>

「ここにリンク先のURL」の部分と、「項目」の名前を書き換えて使ってください。

私が引っかかって先に進めなかったのが、リンク先のURLです。

これ、なんやねーーーーーーん。。。

どこやねーーーーーーーん。。。って事で、一向に先に進まなかったのですが、

URLは先ほどカテゴリーを作成した時のURLを指しています。

私の場合は、趣味のページを開きそのURLをコピペし、

ここにリンク先のURLにはめ込みます。項目は趣味になります。

サブのURLは同じように趣味ーボードゲームのカテゴリーのURLを

ここにリンク先のURLにはめ込みます。項目はボードゲームになります。

自分のサイトのに変更したら、全てをコピーし、

デザイン→カスタマイズ→デザインCSSに貼り付けます。

これで完成です。

 

まとめ

まずはカテゴリーを作る。コードの書き換えをする。書き換えの部分はURLと項目の部分。それらはカテゴリーから引っ張ってくる。