[ 解決済 ] サイドバーをアコーディオンにしたい

VWSとは フォーラム Lightning [ 解決済 ] サイドバーをアコーディオンにしたい

[ 解決済 ] サイドバーをアコーディオンにしたい

  • このトピックには6件の返信、3人の参加者があり、最後にnatsukoshioにより2年前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #61135

    natsukoshio
    参加者

    ■ WordPress のバージョン
    5.8.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    14.14.0

    ■ Pro Unit のバージョン
    1.21.0

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    階層構造になっているナビゲーションメニューをサイドバーに配置した際に、
    1階層目をクリックしたら、2階層目のメニューを表示出来るようにしたいです。

    ■ 自分で試した事
    https://webukatu.com/wordpress/blog/6087/

    これらのサイトを参照にしてみました・・・

    ウィジェットのナビゲーションメニューのところに
    カスタムhtmlで下記を入れてみましたがうまくいきません。

    どなたか教えて頂けませんか?

    <script>
    const menu = document.querySelectorAll(“.menu-item-has-children”);

    function toggle() {
    const sub-menu = this.nextElementSibling;
    this.classList.toggle(“is-active”);
    content.classList.toggle(“is-open”);
    }

    for (let i = 0; i < menu.length; i++) {
    menu[i].addEventListener(“click”, toggle);
    }
    </script>

    ■ 症状が発生するブラウザ
    Chrome

    ■ 実際の症状
    100ページくらいある固定ページと
    ブログのアーカイブが長々と連なり非常に見にくい(醜い?)ページになっております。

    できれば

    jQueryでアコーディオンメニューをサクッと作ろう【コピペOK】


    に書いてあるとおり、既に空いてて、
    別の所をクリックされたら閉じる仕様になったら最高です。

    どなたか助けて頂けませんか?


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #61154

    石川@Vektor,Inc.
    キーマスター

    アコーディオンでなければ

    外観 > カスタマイズ > Lightning デザイン設定 > その他の設定 から 固定ページの孫ページを非表示にする

    にチェックを入れれば… と思ったのですが、 G3 でその機能がなくなっていました。

    取り急ぎ 外観 > CSSカスタマイズ に

    .localNav ul ul.children	{ display:none; }
    .localNav ul li.current_page_ancestor ul.children,
    .localNav ul li.current_page_item ul.children,
    .localNav ul li.current-cat ul.children{ display:block; }
    .localNavi ul.children	{ display:none; }
    .localNavi li.current_page_ancestor ul.children,
    .localNavi li.current_page_item ul.children,
    .localNavi li.current-cat ul.children{ display:block; }

    とかではいかがでしょうか?

    #61179

    natsukoshio
    参加者

    すみません、何が原因か分からないのですが、アコーディオンにはなってないです。

    #61180

    石川@Vektor,Inc.
    キーマスター

    先のCSSは、アコーディオンは少しハードルが高いので、

    「アコーディオンにはならないけれどもアクティブじゃない下階層は非表示になる」

    というものになります。

    アコーディオンでないといけない場合は引き続き誰かがカスタマイズコードを提示してくれるのをお待ちください。

    #61205

    アコーディオンの動作をさせるのはかなり手間がかかると思いますし、そもそもナビゲーションメニューはアコーディオンにしづらい構造になっていると感じます。

    もし該当 URL のサイドバーのメニューをアコーディオンにできたとしても、親メニュー項目である「新型コロナ関連」などのページを開くことができなくなるのでは…?

    固定ページに VK Blocks Pro のアコーディオンを使ってサイトマップ的なメニューページを作るのはどうでしょうか?

    #61265

    固定ページではなく、VK Blocks Pro のアコーディオンブロックをウィジェットに配置して、ご希望に近いことができそうですね。

    #61550

    natsukoshio
    参加者

    皆様、ありがとうございました!
    結局、ワードプレス既存のメニューを使わずに、
    固定ページにhtml<details>を使ったアコーディオンページを作りました。
    それを固定ページ本文ウィジェットを使ってアコーディオンのサイドバーを作ることができました。
    (htmlやCSSはネットから拾って加工中)

    これでたくさんメニューが有るサイトでもスッキリしたページに出来ます。

    Lightningは中小企業のコーポレートサイトにピッタリなテーマなのでとても助かってます。
    いつもありがとうございます!

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。