- このトピックには8件の返信、3人の参加者があり、最後に
により2週、 5日前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 29.1.4
【お使いの Snow Monkey Blocks のバージョン】バージョン 24.1.1
【お使いの Snow Monkey Editor のバージョン】バージョン 11.0.2
【お使いのブラウザ】Brave
【当該サイトのURL】### 実現したいこと
PC版サイトにて、カスタマイズ デザイン メニュー ２行で設定。
スクロール前：ロゴが上、メニュー文字が下、2行 だが、
スクロール後：ロゴが左、メニュー文字が右、1行 にしたい### 発生している問題
スクロール後でも2行のままになってしまう、または、スクロールしても１行にはできるがロゴが表示されない
### 試したこと
CSSで、ロゴを非表示やロゴをfloat:leftなど。
ChatGPT4.1と対話。
お返事お待ちしております。
いつもありがとうございます。
よろしくお願いいたします。Who liked: No userそれ + PC用ヘッダー位置をノーマル にしたらできました！
ありがとうございます！しかし・・・スクロール後に出現する左：ロゴ + 右：メニュー文字のメニュー１行が、ブラウザの横を縮めたらなぜかメニューが上に行って消え去っていきます。
CSSは削除、プラグインも全て停止しても、消えてしまいます。AIに聞いてJS追加してもダメでした。
スクロール後のメニュー出現状態で、ブラウザを横に縮めても、消え去らないようにするには、どうしたら良いのでしょうか？
同じメニュー系の話なので、ここで追記質問させていただきます。
よろしくお願いいたします。
Who liked: No user大変恐縮ですが、クライアントワークのため公開できません 汗
繰り返しになりますが、ファーストビューは２行 → スクロールしたら１行に → ブラウザの横幅を左端でも右端でも、内側でも外側でも、縮めた瞬間にロゴとメニューが上方向に消え去っていきます。
全く関係ないWPのテストサイトでも全く同じ現象を今確認できました。
プラグインを全部停止、CSSを全部削除した状態でも、消えます。
ぜひ、ご回答よろしくお願いいたします。
Who liked: No userドロップナビが表示されている状態で、windowのリサイズをすると
<div class="l-header__drop-nav" aria-hidden="true">になるので、ドロップナビは表示されなくなります。
そのまま下にスクロールしてもドロップナビは表示されませんが、一旦ページ最上部まで戻ってからスクロールするとドロップナビが表示されるようです。Who liked: No userdrop-nav.js の
window.addEventListener("resize:width", (() => n()), !1);が原因のようです。
n()はaria-hiddenを"true"にしてhideDropNavイベント飛ばしてるので幅が変わるたびに非表示になる。Who liked: No user@まーちゅうさん
ありがとうございます！aria-hiddenですね。@mtmekj さん
ドロップナビ（スクロールするとでてくるメニュー）は「画面サイズ」と「スクロールされているかどうか」が表示するかどうかの基準になるため、リサイズすると一旦非表示になるようにしています（表示されていはいけない画面サイズのときに表示されないようにするため）。「スクロールされているかどうか」の判定は
IntersectionObserverを使っているのですが、これは処理が軽いメリットがあるものの、まーちゅうさんが書かれているように一番上まで戻らないと再表示されなくなります。onScrollでスクロール位置を常に監視すれば一番上まで戻らなくても再表示できるようになりますが、処理が重くなるので、リサイズしながら閲覧するユーザーが少ないと想定すると、処理を重くしてまでonScrollに変えたほうが良いのかは疑問です。ということで、現状では
– リサイズするとドロップナビは非表示になる
– リサイズで非表示になった場合は、一度一番上までスクロールしないとドロップナビは表示されないが仕様になります。
Who liked: No user
- トピック「スクロール前は２行だが、スクロール後にロゴとメニュー文字を１行にしたい」には新しい返信をつけることはできません。