ヘッダーナビゲーションのドロップダウンをアコーディオンに

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など ヘッダーナビゲーションのドロップダウンをアコーディオンに

  • このトピックには2件の返信、1人の参加者があり、最後ににより1年、 7ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50117
      そら豆
      ゲスト

      いつもお世話になっています。
      早速の質問で申し訳ないのですが、現在ヘッダーナビゲーションに固定ページを設定して、その固定ページに投稿記事をいくつか副項目として設定しました。

      そうするとPCから見た場合では、マウスがホバーするとドロップダウンで記事が出てくるのでいい感じです。
      しかしスマホから見た場合ですと、メニューをタップすると副項目も含めて最初から全て表示されて見づらいです。

      そこで行いたいのは

      • PCから見た場合、現状と同じマウスホバー→ドロップダウン表示。
      • スマホから見た場合、メニュータップ→副項目があるところはアコーディオンで隠れていてタップして開く閉開式ドロップダウンに

      以上となります。
      お忙しいところ恐れ入りますが、宜しくお願いいたします。

    • #50119
      Hidekichi
      ゲスト

      なぜそうなっているかの説明をすると、例えば、

      pc
        windows
        mac
        linux

      こういう構造の時、windowsやらはもちろんクリックすればそのカテゴリが開くわけですが、pcもカテゴリのリンクになっていて、pcをクリックしたらそのリストが開くというのがまずあります。
      質問で言われていることを実現しようとすると、親をタップすることで、サブメニューが開かないといけないわけですが、同時にカテゴリのリンクになっていることに問題があります。

      マウスの場合、hoverが使えますからそこがリンクであろうとなかろうとサブメニューを開くことができますがタッチデバイスはタップが主になりますから、メニューを開く動作として長押しやダブルタップでサブメニューというのは見た目にわかりませんし、逆にしたとしても操作がわかりにくくなります。

      どうすれば一目瞭然かは全部表示することなんですよ。

      回避する方法として何かしら(ボタンなり画像なり)を別途親のリストに表示してそれをタップすればサブメニューを開くというのも考えられます。では、その何かをどうするかというのも必要になります。その位置はどこかもいるでしょうか。

      またサブメニューを開く際、Aという親をタップして開く、Bという親をタップした時はそれ以外のサブメニューを閉じるというものがあります。次々とサブメニューを開いていくものもあります。そこらはどのように考えられているかも必要です。

      更に問題点として親テーマjavascript.jsにメニューの開閉のスクリプトがありますが、質問の内容を実現するとここをコメントアウト等して、子テーマなどに新たなスクリプトを書く必要が出てきます。
      親テーマに手を加えると、アップデートの際に上書き更新されますから毎回コメントアウト等をすることになります。

      これらはとても面倒くさく、忘れると正しい動作をしなくなります。

      これら理由から、質問の実現はできると思いますが作業的にそこまでやる必要があるかどうか、またやるならその仕様をどうするかなどを考える必要があります。

      もしwordpressのプラグインなどでメニューを思われるような動作に書き換えるものがあればそれを使うのが最も手っ取り早いです。

    • #50121
      そら豆
      ゲスト

      丁寧な解説ありがとうございます。
      非常にわかりやすかったです。

      プラグインを探しても、記事内やウィジェット部分に対応するアコーディオンのプラグインしかなかったです。

      サイト構築をもう少し考えて見ます…

2件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)