ドロップダウンメニュー付のナビゲーションバーTips

QooQをMateriapollo風にするため、下記に紹介した通常のリンクメニューとドロップダウンメニューを備えたナビゲーションバーを利用しています。

【 シンプル・レスポンシブ対応・ドロップダウン 】 ナビゲーションバー 【 決定版 】

シンプルでレスポンシブ対応、ドロップダウンメニューも実装したナビゲーションバーの作成方法です。例では Blogger のテンプレート QooQ を使用していますが、どんなテンプレート、ブログサービスでもコピペで使えると思います。ドロップダウンメニューは自動で閉じるようにしてあります。

indoor-days.blogspot.com

メニューの設定でちょっと悩んだり調べたりしたことがありましたので、その課題と対策として具体的な使い方をまとめておきます。

リンクの貼り方（HTMLの記述）

Bloggerがカテゴリーという概念がないとのことで、その代用をドロップダウンメニューでやるつもりです。すなわち、ナビゲーションバーのメニューの表示がカテゴリで、それをドロップダウンするとラベル分類が表れるというスタイルです。

メニューにリンクを貼るには、リンク先をHTMLに書き込みます。例えば、下記の例では、「Home」と左から4番目の「Blogger」にリンクを貼っています。

    <ul class='menu-list accordion'>
      <!-- submenuなし-->
      <li><a href='https://rainbowgoblinss.blogspot.com/'><span class='material-icons' style='font-size: 18px; padding-right: .5em;'>home</span>Home</a></li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Menu2</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href=''>Submenu1</a></li>
          <li><a href=''>Submenu2</a></li>
          <li><a href=''>Submenu3</a></li>
        </ul>
      </li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Menu3</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href=''>Submenu1</a></li>
          <li><a href=''>Submenu2</a></li>
        </ul>
      </li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Blogger</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href='https://rainbowgoblinss.blogspot.com/search/label/Bloggerカスタマイズ?'>カスタマイズ</a></li>
          <li><a href='https://rainbowgoblinss.blogspot.com/search/label/Materiapollo風?'>Materiapollo風</a></li>
          <li><a href=''>Submenu3</a></li>
          <li><a href=''>Submenu4</a></li>
        </ul>
      </li>

３行めに「Home」メニューのリンク先、25，26行目が「Blogger」メニューのリンク先を書いています。リンク先のURLは所望の画面を開いたときchromeのアドレス欄に表示されるURLをコピペしています。

３行めに「Home」メニューでは、アイコンをつけることも問題なくできています。

ラベルをリンク先としたときの課題

 

%E3...%BAは"カスタマイズ”がコピペで自動でこの形に変換されるようです。カナ文字で書いても、どちらでもOKでした。

問題は、次の”&max-results=7”（７は一覧の記事数）の記述があると、コードのコンパイル（HTMLビューでの「保存」）でエラーが出ます。

なので、上記のHTMLに載せたように”&max-results=7”を消してURLを張りつけます。これなら、問題なくコンパイルできました。

ページャのカスタマイズが無効

”&max-results=7”を省いたとき、記事の最下部にあるページャは下記のようになります。

カスタマイズして、記事数の区分で並んでいるようにしているのですが、区分数の情報がないので、デフォルトの表現に戻ったのだと思います。

基本がわかっている人ならば、課題でもなんでもないのでしょうけれど、対策（URLに”&max-results=7”を書いてもOKなコード）は海外の記事で見つけました。

How i can include label code in menu

when i include this label url http://dewdropzone.blogspot.com/search/label/English%20Movie?&max-results=24 in this menu code <li><a href='http://dewdropzone.blogspot.com/search/label/

stackoverflow.com

<li><a href='https://rainbowgoblinss.blogspot.com/search/label/Bloggerカスタマイズ?&amp;max-results=7' itemprop='url' title='test'>カスタマイズ</a></li>

すると、次のようにカスタマイズした正常なページナビゲーションになりました。

まとめ

ナビゲーションバーにラベルのリンクを貼るとき、

• HTMLの該当する箇所を編集して、リンク先のURLを書き込みます。このとき、リンク先のURLはブラウザのURL欄からコピペすればOKです。
• ただし、そのままではページナビゲーションの表示はカスタマイズが適用されません。URLに”&amp;max-results=7' itemprop='url' title='test'”を追加すると、カスタマイズが適用されます。