グローバルナビゲーションのサブメニューの表示/非表示をhoverからクリックにしたい

0
Who liked: No user
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #17440
    アクツ
    参加者
    167

    【お使いの Snow Monkey のバージョン】v6.1.1

    ===
    いつもお世話になっております。
    グローバルナビゲーション内のサブメニューの表示・非表示のトリガーを:hoverではなく、:clickにしたいのですが、うまくいかなくて、もしそういったことが可能であれば、ご助言いただけるとうれしいです。

    ## 最初やろうとしたこと
    既存のjsはそのままで、hoverで表示・非表示させないために、
    – CSSでaria-hiddenがtrueでもfalseでもを強制的にdisplay:noneにする
    – JQueryで新しく表示コントロール用のclassをclick時に付与して(.is-open)、classが付与されているときは、表示するようにCSS設定

    上記方法で試してみたところ、当然ながら、既存のjsと私の追加したjsが戦い合って、クリックで表示・非表示したり、hoverで表示したり非表示したりと、大変ひどい状況(苦笑)になっています。

    ## 次にやろうとしたこと
    既存のjs自体を変えてしまおうと、GitHubからcloneして、たぶんここじゃない?みたいなjsのところだけコメントアウトして、「npm run build」で書き出してみたのですが、assetsにjs書き出されず・・・

    ====

    そんなこんなでうまくできていない感じです・・・

    0
    Who liked: No user
    #17444
    アバター画像キタジマ タカシ
    参加者
    2421

    あーこれはかなり大変かもしれません…。グローバルナビゲーションのサブメニュー表示は .c-navbar__item.c-navbar__submenu.c-navbar__subitem に反応しておこなわれるようになっているのですが、これを剥がして…というのが多分結構大変だと思うので、おそらく一番単純なのはグローバルナビゲーションの .c-navbar コンポーネントの class 名を全く別のものに変えて、JS も click で反応するものをオリジナルでつくってしまうことだと思います。

    サブメニューの JS はこれになります。

    これを参考に、似たようなものをつくれば良いとは思うのですが、クリックだと親メニュー自体にリンクがあるときどうするとかそういう問題もでてくるので、独自に調整が必要な部分も結構あるんじゃないかなと思います。

    0
    Who liked: No user
    #17445
    アバター画像キタジマ タカシ
    参加者
    2421

    ドロワーの挙動がクリックで開閉なので、ドロワーと同じようにトグルボタンをつくれば良いですかね…うーん。僕のほうで Basis をアップデートして、.c-navbar にクリックモードみたいなのをつくるのも良いかも…と思うのですが、そこそこ難しそうなのでちょっとすぐにやるのは難しそうです。

    ドロワーの JS をうまいこと流用して実装するか、とりあえず現状のホバーを使ってもらって、将来的に Basis にクリックモードがついたときに変更してもらうのが良いかも…です。

    0
    Who liked: No user
    #17447
    アクツ
    参加者
    167

    キタジマさんありがとうございます!!
    あと、Basisのアプデまで検討してくれてありがとうございます!

    キタジマさんの回答みて、やろうとしていたことがけっこう難しいことと、そこまで頑張るなら、サブナビゲーションじゃなくて、別の部分で表示用のコンポーネント作っておいて、それをグロナビのメニューのクリックで、表示・非表示するような形でいいんじゃないかとだんだん思ってきました。
    (むしろ、いままでグロナビで実現しようと固執してた自分よバカ!!という感じです(汗))

    いつも迅速なご返答・ご対応ありがとうございます!!

    0
    Who liked: No user
    #17450
    アバター画像キタジマ タカシ
    参加者
    2421

    承知しました!とりあえず issue はたてましたので乞うご期待ということで…!

    0
    Who liked: No user
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「グローバルナビゲーションのサブメニューの表示/非表示をhoverからクリックにしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。