メニューボタンの表示／非表示を行うという、非常にシンプルな挙動なのですが、どう実装しているのか全くわからず困っています。
showcaseの「FREEBIE: Slick Template（ Webflow ） 」を参考に勉強しているのですが、ハンバーガーメニューがどうして動いているのか、webflowの中味を見てもわかりません。いろいろな箇所を見ているのですが、ハンバーガーメニューをクリックした際の挙動がどこにも見つからないのです。
メニューの挙動を学ぶために、不要なコンテンツを削除し、シンプルにメニューだけして動かしています。
添付画像のような形で、ハンバーガーメニューをクリックすると、×ボタンに切り替わり、メニューが表示される。という本当にシンプルな動きなのですが、全くわかりません。
Element triggerにも記述がないですし、他の項目にも記述がないように思います。
webflowに詳しい方に教えていただきたいです。
よろしくお願い致します。
回答者
こんにちは、初めての質問ありがとうございます。
Webflow そこまで詳しくないので、、Interactionで表示しているように見えるのですが、Trigerがどこにも無いのですね。。
同じように挙動させるのであれば、
①Nav menu自体が非表示にする
②Interaction のElement trigerを設定し、そこでアニメーションで表示する
ということで同じページ動作は可能です。
ここのNoCodeSchoolの説明がわかりやすいはずです。
CMS機能、インタラクション効果などについて - Webflowの使い方#3
【公式】
Webflow show animation
もっと詳しい人いたら、教えて下さい
質問者
ご連絡ありがとうございます！
こちらの画像を見ると、インタラクションが設定されていますが、私のブラウザでは何も設定されていないのです。
@Tsubasa Miyazakiさんが設定されたわけではなく、このテンプレートで最初から設定されておりましたでしょうか？
参考動画も確認してみます！
回答者
あっ、申し訳ない。この画像間違いです。
インタラクションでも同じことできるよなー と思って、設定して確認してた画面です。私が、作成したトリガーです。
Nav mene で表示/非表示な設定はできたので、同じような挙動はできるのかなと思いました。
とはいえ、このテンプレートの作者の人が、どこでやっているのか？ 謎です。。。
ご存じでしたら、もうしわけないですが、Webflowで
Navbar というデフォルトの機能もあるので、そっちでやる方が早い気もします。
Navbar
Add, customize, and reuse a Navbar.
質問者
なるほどです。理解しました。ありがとうございます！
この作者に捉われずに作ってみます！
