【はてなブログカスタマイズ】階層型グローバルメニューを設置。スクロールするとトップに固定される仕様（PC）

サイドバーにも階層型のカテゴリー表示をしておりますが、グローバルメニューを設置してみることにしました。

プルダウンメニューが表示される「階層型」にしたかったので、この機会にカテゴリーも整理してすっきりしました（これでも、前よりはすっきりしましたー）。

今回目指したのは以下の仕様です：

プルダウンメニューつきの階層型グローバルメニュー
画面をスクロールすると、ページトップに固定

相変わらずHTMLやCSSの知識は乏しいので、ほぼコピペ専門ですが、何とかなりました。

なお、今回はPC版のみです。スマホ版はまたの機会に。

もくじ

参考にさせて頂いた記事
実際に使用したコード
作業の流れ

参考にさせて頂いた記事

階層型グローバルメニューについては、TKKさんの『My Web道』から：

times-diary.hatenablog.com

基本的な知識のない初心者にとっては、こんな風にさくっとコードを紹介していただけると、実は有難いという場合があります。。

TKKさん、ありがとうございました！　

そして、TKKさんの記事内で紹介されていた、ゆきひーさんの記事を読んで、以下のカスタマイズを実行しました。

★メニューの縦幅を狭くする：

元のコードで、heightまたはline-height 40px となっているところを30pxに変更しました。

★アイコンを変更（カテゴリー名の横にあるを、とに書き換え）：

<i class="blogicon-chevron-down>を、それぞれ<i class="blogicon-home">と<i class="blogicon-plus">に変更しました。

☟ゆきひーさんの記事はこちら

www.yukihy.com

とても詳しく説明されていました。初心者の私には、理解しきれない部分もあったのですが、希望のカスタマイズを無事に実行することができました！　

ゆきひーさん、ありがとうございます！

なお、アイコンというとFont Awsomeが有名ですが、はてなブログ内で使えるアイコンが結構あるということも知りました。

アイコンについては、しろかい！さんの記事が分かりやすいです

shirokai.hatenablog.com

次に、スクロールすると途中から上部に現れてそのまま固定されるメニューは、コトダマウェブさんの以下の記事を参考にさせて頂きました！

cotodama.co

いろいろな記事を読んでもうまくいかず、途方に暮れましたが、コトダマウェブさんの記事にあるコードを書き込んでみたら、うまくいきました！

以下、ちょっとだけ、変更を加えました。

どのくらいスクロールすると現れるか指定する数値は、結構下に行ってから出てきてほしかったので、1000としました。

はてなブログ無料版の場合、上部に常にはてなブログのバーが出ている状態なので、これと重ならないようにするため、メニューバーを固定する場所を指定する数値は、Top：30pxとしました（一番上なら Top：0のようです）。

実際に使用したコード

詳しい解説は上記の達人たちのブログにお願いすることにして、実際に使用したコードを以下に記載します。

だいぶ散らかったカテゴリ―分けで見づらいですが、ご容赦ください。

HTMLコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 1000) { //100px以上スクロールした固定
      $('#menu').addClass('fixed');
    } else {
      $('#menu').removeClass('fixed');
    }
  });
});
</script>

<!-- ナビゲーションバー -->
<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li>
            <a href="http://tsupiccoro.hatenablog.com/"><i class="blogicon-home"></i>HOME</a>
           
        </li>
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと">着物<i class="blogicon-plus"></i></a>
            <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと%20-%20着付けなど">着付けなど</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと-着物でお出かけ">着物でお出かけ</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと-着物まわりの小物">着物まわりの小物</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと-着物歳時記">着物歳時記</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/着物のこと-夏の着物・浴衣">夏の着物・浴衣</a></li>
               
            </ul>
            </li>
        <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ">親子で着物<i class="blogicon-plus"></i></a>
        <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ-50記事ごとに書くことにした随筆的なもの">50記事ごとの随筆的なもの</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ-和文化体験">和文化体験</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ-手作り着物ギャラリー">手作り着物ギャラリー</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ-簡単着物ヘアアレンジ">簡単着物ヘアアレンジ</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/親子で着物あれこれ-親子で楽しむ着物の本">親子で楽しむ着物の本</a></li>
               
            </ul>
        </li>
        
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/着物コーディネート帖">着物コーディネート</a>
        </li>
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/和裁">和裁<i class="blogicon-plus"></i></a>
          <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20こども単袖半襦袢">こども単袖半襦袢</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20こども無双袖半襦袢%20">こども無双袖半襦袢</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20こども袷着物">こども袷着物</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20こども長襦袢">こども長襦袢</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20ミシン併用浴衣">ミシン併用ゆかた</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20一つ身ゆかた">一つ身ゆかた</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20一つ身ウール">一つ身ウール</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20一つ身被布">一つ身被布</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20四つ身ゆかた">四つ身ゆかた</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20四つ身ウール">四つ身ウール</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20四つ身被布コート">四つ身被布コート</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20和裁あれこれ">和裁あれこれ</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20背守り・紐飾り">背守り・紐飾り</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/和裁%20-%20裁断図">裁断図</a></li>
               
            </ul>   
           
        </li>
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド">ハンドメイド<i class="blogicon-plus"></i></a>
            <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド-はぎれで作ったもの">はぎれで作ったもの</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド-帯">帯</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド-帯留め">帯留め</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド-入園・入学">入園・入学</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ハンドメイド-その他">その他</a></li>
            </ul>
        </li>
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/レビューその他">レビューその他<i class="blogicon-plus"></i></a>
            <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/レビュー・その他%20-%20こども・遊び・学び">こども・遊び・学び</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/レビューその他-家電レビュー">家電レビュー</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/レビューその他-箱%EF%BC%86収納レビュー">箱・収納レビュー</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/レビューその他-節約・お小遣い稼ぎ">節約・お小遣い稼ぎ</a></li>
                 <li><a href="http://tsupiccoro.hatenablog.com/archive/category/レビュー・その他%20-%20雑記">雑記</a></li>
               </ul>
        </li>
        <li>
            <a href="http://tsupiccoro.hatenablog.com/archive/category/ブログのこと">ブログのこと<i class="blogicon-plus"></i></a>
            <ul class="second-content">
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ブログのこと-カスタマイズ">カスタマイズ</a></li>
                <li><a href="http://tsupiccoro.hatenablog.com/archive/category/ブログのこと-ブログ概要">ブログ概要</a></li>
               </ul>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

CSSコード

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #63b7e0;/*７*/
}
#menu-inner{
    width: 100%;/*１*/
    height: 30px;/*２*/
    margin: 0 auto;
    background: #63b7e0;/*８*/
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 30px;/*２*/
    background: #63b7e0;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #007bc1;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 30px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 160px;/*４*/
    height: 30px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 30px;/*５*/
    background: #63b7e0;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #007bc1;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #007bc1;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 30px;/*６*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 30px;/*６*/
    padding: 0;
    text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

.fixed {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  z-index: 10;
}

※重複や間違いがある可能性が高いと思いますが、とりあえずこれで動作しています…。