本日は、このブログに設定したグローバルナビ(グローバルメニュー)のお話です。
グローバルナビ
私が使わせていただいているInnocentでは、標準でグローバルナビを設置することが出来ます。しかも、レスポンシブ対応です。設定自体はとてもシンプルで簡単にできました。
執筆時点はこれです。
ハンバーガーメニュー
ところがです。
iPhoneなどの横幅の狭い画面で見ると、これらの表示が消えてハンバーガーメニューだけが表示されます。
若い方やウェブに慣れた方であれば、ここを押すとメニューが出てくることをご存知だと思います。
でも年配の方の中には、知らない方も多いようです。かく言う私も、初めの頃はよく分かりませんでした。
(*^-^*)>"
なのでしばらくは、こんな表示にしていました。
その後やったことは
ハンバーガーメニューを"メニュー"という文字に置き換えちゃいました。また、メニューの横にウェブアイコンを表示して、ここを押すと何かができそうな雰囲気を出しました。
アイコンは、はてなブログが標準で提供しているものを使用しました。参考にさせていただいた記事はこれです。とても助かります。
さらにメニューを押すと、"メニュー"という文字を”閉じる”という表示にかえるようにしました。参考にさせていただいた記事は、これです。ありがとうございます。
せっかくなので固定してみました
せっかくなので、グローバルナビを画面上部に固定してみました。参考にさせていただいた記事は、これです。
設定場所は
設定は次の3ヶ所です。
ダッシュボード → デザイン → カストマイズ → ヘッダ → タイトル下
<!-- 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.グローバルメニュー↑ */
まとめ
本日は、このブログに設定したグローバルナビをご紹介しました。
iPhoneなど横幅が狭い画面でご覧になっているとき、それぞれのウェブアイコンを狙ってポチっと押された場合でも・・・、メニュー項目が出てしまいます。
これって詐欺じゃない?と思われるかも知れません。
そのときは、ごめんなさいです。
🙇
(`∩´)ノд';)
おしまい
※最新の設定は、こちらの記事でご確認ください。