NoCodeでサイト構築できる「STUDIO」でヘッダーのサブメニューを実装する

地方のエンジニアの少ない中小企業で副業を行っていて、現場のメンバーでもメンテナンスできるようなNoCodeのサイト制作が求められ、最近よくSTUDIOを使っています。
STUDIO:https://studio.design/ja

こんなメニューを作成します↓

全体の構成はこのような感じです↓

ベースとなるヘッダーを用意する

今回はABOUTを選択し、2回グループ化します。
「commandキー+G」をすると、グループ化できます。2回もグループ化するなんて謎かもしれませんが、この後にいn hoverという機能を利用するために必要になります。

ABOUTのテキストと並列になる場所にテキストを追加します。
更に追加したテキストをグループ化します
デフォルトだとABOUTと追加したテキストは横並びになるので、縦並びになるよう修正します

好きな数だけメニューを追加します

サブメニューが入ったグループの配置を「相対位置」から「絶対位置」に変更し、好みの位置に移動させます。更に色や形を整えていきます

sub menu group
・縦幅： 50px
・横幅：280%
・塗り：#EEEEEE

メニューテキスト
・左右のマージン：10px

ここから、「ABOUT」をホバーしたときのみサブメニューが表示されるように設定をするのですが、その前の準備としてABOUTを囲っている外側のグループ（out side groupと呼びます）のホバー設定をします。

こうすると、見た目上は変化がないのですがout side groupの中にある要素がin hoverという機能を使えるようになります。

次に、サブメニュー（menu1,menu2,menu3）は通常時は表示されないように設定するため、sub menu groupを選択し、モーションの透明度を0に設定します。

このとき、一緒にスケールのY軸を0、原点を上の真ん中を選択すると、表示されたときの動きがいい感じになります。

最後にsub menu group を選択し、コンディションから「in:hover」を選択した状態でモーションの透明度を1、スケールのY軸を1に設定します。

以上で設定完了です。
ライブプレビューで様子を見てみましょう！

できてますね！

NoCodeのツールですが、かなり細かいところまで表現することができるSTUDIO、エンジニア・デザイナーじゃないと理解が難しい概念などたまにありますが、テキストの修正やブログの記事更新などは誰でも簡単にできてしまいます！
わからないところはチャットで質問できるところもありがたいポイントです。

サイトのテンプレートなども豊富で、サクッとサイトを作りたいときの手段として一つ持っていてもいいかと思います！