ﾌﾞﾛｸﾞｱｺｰﾃﾞｨｵﾝﾒﾆｭｰ

ブログでもアコーディオンメニューを使いたい

　HAIKの旧Topページのように、全部の項目をずらずら並べたメニューではなくて、このページの様に、「WordPress導入」関係のページなら、他の項目の詳細は折りたたんで、導入の所だけが詳細に表示される方が、閲覧者にとっても、とても親切なメニューになります。
　固定ページでこれをやるには、前ページで紹介した Accordeon Menu CK　というプラグインが使えます。
　ところがこれでブログ投稿のカテゴリーを表示しようとしてうまく機能しませんでした。おそらく2段階までのメニュー表示ならうまく動くのでしょうが、このページのメニューの様に、3段階の表示にすると、どんなにメニューの作り方を工夫しても、必要なところでもメニューが途中で閉じてしまいます。

bellows-submenu導入

　令和3年10月まで jQuery Vertical Accordion Menu を使ってきましたが、今回よく見てみると、なんか表示がおかしくなっていました。それで、bellows-submenu にプラグインを変えました。
　導入は、プラグインを登録して、サイドメニューの所にこのプラグインを登録し、「ﾌﾟﾗｸﾞｲﾝ>ｲﾝｽﾄｰﾙ済みﾌﾟﾗｸﾞｲﾝ」からこのプラグインの Control Panel を開いて、Automatically expand the submenu of the current menu item のタブにチェックを入れれば終了です。
　ただこれだと、 Accordeon Menu CK 用に設定した他のサイドメニュー部分と表示が合わないので、ちょっとcssをいじりました。
　いい加減ないじり方なので、不要な設定要素がまだ残っているかもしれません。
　このプラグインを設置したブログ見本はこちら。

cssの調整

　設定を必要箇所だけ再設定するためのファイルを作ります。

/* bellows-submenu.css */
#bellows_navigation_widget-2 .bellows {
  margin: 20px 0px;/*20*/
  --bellows-item-padding-v: 5px;/*5*/
  --bellows-item-padding-h: 5px;/*5*/
  --bellows-sub-item-padding-v: 5px;/*5*/
  --bellows-indent: 10px;/*10*/
}

#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-item-level-0 .bellows-submenu {
   padding-left:15px;/*15*/
}

#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-target,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-custom-content.bellows-custom-content-padded,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows .bellows-target.bellows-target-w-image > .bellows-target-text,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-target.bellows-target-w-image > .bellows-image.bellows-image-padded {
  --bellows-level: 1;
  padding: var(--bellows-sub-item-padding-v) var(--bellows-sub-item-padding-h);
  padding-left: calc(var(--bellows-sub-item-padding-h) + (var(--bellows-indent) * (var(--bellows-level) - var(--bellows-indent-level-offset))))-5;
}

#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-target > .bellows-target-text {
  color: #6600FF;
  font-size: small;
}
#bellows_navigation_widget-2 ul{
  list-style-type: none;
}
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-target,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-custom-content.bellows-custom-content-padded,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows .bellows-target.bellows-target-w-image > .bellows-target-text,
#bellows_navigation_widget-2 .bellows .bellows-nav .bellows-submenu .bellows-target.bellows-target-w-image > .bellows-image.bellows-image-padded {
  margin-left: 0px;
  padding-left: 0px;	
}

　これでもまだAMP時のメニュー表示がおかしいですが、これ以上の直し方がまだ発見できません。
　プラグインの設定で、skin は None(Disable) を選択します。

追加cssの設定

　元のcssはそのままに残して、上で設定し直したcssを 「独自CSSやJavascript追加」のやり方で追加指定します。
　こうすれば、もとのプラグインがいくら更新されても、設定が上書きされてしまう心配がありません。
　Simple Custom CSS and JSプラグインを使う場合は、