Home
Menu
Side
Twitter
Top
ホーム / Blog | Blogger |

【 Blogger 】 サイドバーメニュー（ドロップダウン付き）を改良してみた

2020/07/08

Blog Blogger

この記事はこんな悩みを解決します！
  • このブログで紹介されているサイドバーメニューで親要素にもリンクが欲しい

こんにちは HARU（ @HARU ）です。

今回は前回作成したサイドバーメニューを改良して、階層メニューがある場合の親要素にもリンクを貼れるようにします。

サイドバーメニュー作成はこちら

前回作成したメニューでは、親要素にリンクを貼れないように調整しました。

親要素にリンクを貼らない理由
  • 階層メニュー表示ボタン範囲の確保のため
  • 誤クリック防止のため

そもそも階層メニューで詳細メニューを表示するのに、親要素にリンクが必要なのか？と考え、出した答えがこれでした。

しかし、よくよく考えてみるとカテゴリーでメニューを調整したいときに、大きい枠組みのリンク欲しくない？と思いはじめ今に至ります。

今回の調整は CSS と サイドバーメニューのひな型を調整します。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

基本的なサイドバーメニューの実装

基本的なサイドバーメニューの実装に関しては以下のリンク先を参照してください。

メニュー実装後、以下の手順で CSS とサイドバーメニューのひな型を調整することで、本記事の内容を網羅できます。

サイドバーメニュー作成はこちら

改良イメージ

PC 画面サイズで表示される場合

親要素にもリンクを貼れるように調整しました。

サイドバーメニュー 親要素にもリンクを貼れるようにしたイメージ

スマホ画面サイズで表示される場合

hover での色変化によるリンク範囲の認識ができないため、境界線を追加しました。

サイドバーメニュー スマホ表示時に境界線を追加イメージ

サイドバーメニューの調整

実際に CSS とサイドバーメニューのひな型を変更してみましょう。

サイドバーメニュー基本 CSS 変更

【 Blogger 】サイドバーメニュー（ドロップダウン付き）を作ってみた で追加したサイドバーメニュー基本 CSS を以下の CSS に変更します。


  /* アコーディオンメニュー(ver.2) */
  #menu-wrapper {
    display: none;
  }
  /* メニューリスト */
  #menu-container ul {
    list-style: none;
    overflow: hidden;
  }
  #menu-container li {
    text-decoration: none;
    padding: 0 !important;
    transition: all 0.3s ease;
  }
  #menu-container li a {
    padding: 20px;
    display: block;
    transition: all 0.3s ease;
  }
  .accordion-toggle a {
    margin-right: 25%;
  }
  #menu-container li a:hover {
    color: #ffffff;
    background-color: #808080;
  }
  #menu-container .menu-list .menu-submenu li{
    width: 50%;
    float: left;
    text-align: center;
  }
  #menu-container .menu-list li.accordion-toggle, li.none, #menu-container .menu-list {
    font-size: 16px;
  }
  #menu-container .menu-list li:first-of-type {
    border-top: 0;
  }
  #menu-container a{
    color: #333333;
  }
  #menu-container li .menu-link:hover {
    color: #ffffff;
  }
  .accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 16px;
    position: relative;
    letter-spacing: 1px;
  }
  .accordion-content {
    display: none;
  }
  /* トグルボタン関連 */
  .accordion-toggle .menu-link:before, .accordion-toggle .menu-link:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    width: 15px;
    height: 2px;
    margin-top: -1px;
    background-color: #333333;
    transform-origin: 50% 50%;
    transition: all 0.3s ease-out;
  }
  .accordion-toggle .menu-link:before {
    transform: rotate(-90deg);
    opacity: 1;
    z-index: 2;
  }
  /* open時ボタン+トグル色 */
  .accordion-toggle.active-tab {
    background: #7b9ad0;
    transition: all 0.3s ease;
  }
  .accordion-toggle.active-tab a {
    color: #fff!important;
  }
  .menu-link.active{
    color: #fff !important;
    transition: all 0.3s ease;
  }
  .accordion-toggle .menu-link.active:before {
    transform: rotate(0deg);
    background: #fff !important;
  }
  .accordion-toggle .menu-link.active:after {
    transform: rotate(180deg);
    background: #fff !important;
    opacity: 0;
  }

スマホ表示用 CSS 追記

【 Blogger 】サイドバーメニュー（ドロップダウン付き）を作ってみた で追加したスマホ表示用 CSS に以下の CSS を追記します。

@media 内に追記するようにしてください。


  /* 境界線追加 */
  .accordion-toggle a {
    border-right: 1px solid #dbdcd2;
  }

サイドバーメニューのひな型変更

【 Blogger 】サイドバーメニュー（ドロップダウン付き）を作ってみた で追加したサイドバーメニューのひな型 を以下のように変更します。


<div id='menu-container'>
  <div id='menu-wrapper'>
    <div id='hamburger-menu'></div>
    <i class="fa fa-bars fa-2x"></i>
    <span>Menu</span>
  </div>
  <ul class='menu-list accordion'>
    <!-- mainmenuのみ -->
    <li class='none'>
      <a class='menu-link' href="">Menu1</a>
    </li>
    <!-- submenuあり-->
    <li class='toggle accordion-toggle'>
      <a class='menu-mainmenu' href="">Menu2</a>
      <span class="menu-link"></span>
    </li>
    <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>
    <!-- submenuあり-->
    <li class='toggle accordion-toggle'>
      <a class='menu-mainmenu' href="">Menu3</a>
      <span class="menu-link"></span>
    </li>
    <ul class='menu-submenu accordion-content'>
      <li><a href=''>Submenu1</a></li>
      <li><a href=''>Submenu2</a></li>
    </ul>
    <!-- submenuあり-->
    <li class='toggle accordion-toggle'>
      <a class='menu-mainmenu' href="">Menu4</a>
      <span class="menu-link"></span>
    </li>
    <ul class='menu-submenu accordion-content'>
      <li><a href=''>Submenu1</a></li>
      <li><a href=''>Submenu2</a></li>
      <li><a href=''>Submenu3</a></li>
      <li><a href=''>Submenu4</a></li>
    </ul>
  </ul>
  <div class='menu-back'></div>
</div>

メニューの編集

ul タグや li タグを追加していくことで、メニューの編集を行うことができます。

階層メニューを必要としないの場合


  <!-- mainmenuのみ -->
  <li class='none'>
    <a class='menu-link' href="">Menu1</a>
  </li>

階層メニューが必要な場合


  <!-- submenuあり-->
  <li class='toggle accordion-toggle'>
    <a class='menu-mainmenu' href="">Menu2</a>
    <span class="menu-link"></span>
  </li>
  <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>

QooQ