-
投稿者投稿
-
2019年6月4日 11:44 AM #17440
【お使いの 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いいねをした人: 居ません2019年6月4日 1:35 PM #17444あーこれはかなり大変かもしれません…。グローバルナビゲーションのサブメニュー表示は
.c-navbar__item
、.c-navbar__submenu
、.c-navbar__subitem
に反応しておこなわれるようになっているのですが、これを剥がして…というのが多分結構大変だと思うので、おそらく一番単純なのはグローバルナビゲーションの.c-navbar
コンポーネントの class 名を全く別のものに変えて、JS もclick
で反応するものをオリジナルでつくってしまうことだと思います。サブメニューの JS はこれになります。
これを参考に、似たようなものをつくれば良いとは思うのですが、クリックだと親メニュー自体にリンクがあるときどうするとかそういう問題もでてくるので、独自に調整が必要な部分も結構あるんじゃないかなと思います。
♥ 0いいねをした人: 居ません2019年6月4日 1:48 PM #17445ドロワーの挙動がクリックで開閉なので、ドロワーと同じようにトグルボタンをつくれば良いですかね…うーん。僕のほうで Basis をアップデートして、
.c-navbar
にクリックモードみたいなのをつくるのも良いかも…と思うのですが、そこそこ難しそうなのでちょっとすぐにやるのは難しそうです。ドロワーの JS をうまいこと流用して実装するか、とりあえず現状のホバーを使ってもらって、将来的に Basis にクリックモードがついたときに変更してもらうのが良いかも…です。
♥ 0いいねをした人: 居ません2019年6月4日 2:14 PM #17447キタジマさんありがとうございます!!
あと、Basisのアプデまで検討してくれてありがとうございます!キタジマさんの回答みて、やろうとしていたことがけっこう難しいことと、そこまで頑張るなら、サブナビゲーションじゃなくて、別の部分で表示用のコンポーネント作っておいて、それをグロナビのメニューのクリックで、表示・非表示するような形でいいんじゃないかとだんだん思ってきました。
(むしろ、いままでグロナビで実現しようと固執してた自分よバカ!!という感じです(汗))いつも迅速なご返答・ご対応ありがとうございます!!
♥ 0いいねをした人: 居ません2019年6月4日 2:18 PM #17450承知しました!とりあえず issue はたてましたので乞うご期待ということで…!
♥ 0いいねをした人: 居ません -
投稿者投稿
- トピック「グローバルナビゲーションのサブメニューの表示/非表示をhoverからクリックにしたい」には新しい返信をつけることはできません。