グローバルナビの表示と固定 - おっちゃんあんちゃんの覚書

本日は、このブログに設定したグローバルナビ（グローバルメニュー）のお話です。

グローバルナビ
ハンバーガーメニュー
その後やったことは
せっかくなので固定してみました
設定場所は
まとめ

グローバルナビ

私が使わせていただいているInnocentでは、標準でグローバルナビを設置することが出来ます。しかも、レスポンシブ対応です。設定自体はとてもシンプルで簡単にできました。

moonnote.hateblo.jp

執筆時点はこれです。

グローバルナビ

ハンバーガーメニュー

ところがです。

iPhoneなどの横幅の狭い画面で見ると、これらの表示が消えてハンバーガーメニューだけが表示されます。

ハンバーガーメニュー

若い方やウェブに慣れた方であれば、ここを押すとメニューが出てくることをご存知だと思います。

でも年配の方の中には、知らない方も多いようです。かく言う私も、初めの頃はよく分かりませんでした。

(*^-^*)>"

なのでしばらくは、こんな表示にしていました。

ハンバーガーメニューの工夫

その後やったことは

ハンバーガーメニューを"メニュー"という文字に置き換えちゃいました。また、メニューの横にウェブアイコンを表示して、ここを押すと何かができそうな雰囲気を出しました。

偽りのグローバルメニュー

アイコンは、はてなブログが標準で提供しているものを使用しました。参考にさせていただいた記事はこれです。とても助かります。

www.foxism.jp

さらにメニューを押すと、"メニュー"という文字を”閉じる”という表示にかえるようにしました。参考にさせていただいた記事は、これです。ありがとうございます。

www.tam-tam.co.jp

せっかくなので固定してみました

せっかくなので、グローバルナビを画面上部に固定してみました。参考にさせていただいた記事は、これです。

web-pc.net

設定場所は

設定は次の３ヶ所です。

ダッシュボード → デザイン → カストマイズ → ヘッダ → タイトル下

<!-- 02.グローバルナビゲーションの設置↓ -->
<nav class="main-navigation">
  <div class="menu-toggle" data-item="メニュー">
    <i class="blogicon-home"></i><i class="blogicon-folder"></i>
    <i class="blogicon-search"></i><i class="blogicon-user"></i>
    <i class="blogicon-mail"></i>
   </div>
   <div class="main-navigation-inner">
   <ul>
     <li><a href="/archive"><i class="blogicon-home"></i>ホーム</a></li>
     <li><a href="#modal01" class="has-child modalOpen"><i class="blogicon-folder"></i>カテゴリ選択</a></li>
     <li><a href="#modal02" class="has-child modalOpen"><i class="blogicon-search"></i>キーワード検索</a></li>
     <li><a href="http://profile.hatena.ne.jp/tk450/"><i class="blogicon-user"></i>自己紹介</a></li>
     <li><a href="//xxxx.xxx/xxx"><i class="blogicon-mail"></i>お問合せ</a>/li>
   </ul>
 </div>
</nav>
<!-- 02.グローバルナビゲーションの設置↑ -->

ダッシュボード → デザイン → カストマイズ → フッタ

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
  var $fttr = $.noConflict(true);
  (function($) {
    $(function() {
      // 02.グローバルナビゲーションの設置↓
      $(".menu-toggle").on("click", function() {
        $(".main-navigation").toggleClass("toggled");
        if ($(".menu-toggle").attr("data-item") == "閉じる") {
          $(".menu-toggle").attr("data-item", "メニュー");
        } else {
          $(".menu-toggle").attr("data-item", "閉じる");
        };
      });
      // 02-01.上部に固定↓
      var nav = $("#top-editarea"), offset = nav.offset();
      $(window).scroll(function( {
        if ($(window).scrollTop() > offset.top) {
          nav.addClass("fixed");
          $("#page-top").fadeIn("slow");
        } else {
          nav.removeClass("fixed");
          $("#page-top").fadeOut("slow");
        }
      });
      // 02-01.上部に固定↑
      // 02.グローバルナビゲーションの設置↑
    });
  })($fttr);
//-->
</script>

ダッシュボード → デザイン → カストマイズ → デザインCSS

/* 02.グローバルメニュー↓ */
.main-navigation {
  background-color: rgba(137, 189, 211, 1);
}

.menu-toggle, .main-navigation, .main-navigation a {
  color: #000080 !important;
}

.menu-toggle::before {
  content: attr(data-item);
  padding: 8px;
  border-radius: 8px;
  border: 2px solid #000080;
}

.menu-toggle {
  font-size: 1.4em;
}

.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10000;
}
/* 02.グローバルメニュー↑ */