【STUDIO】プルダウンメニューの実装方法まとめました

こんにちは、なおです。

最近、自分の事業サイトを作るにあたって、ノーコードでサイト制作ができる「STUDIO」を初めて触ってみました。

基本的には感覚的に操作できるのであまり難しいことはなかったのですが、プルダウンメニューの実装については調べながらやってみてもあまり上手くできず、大格闘しました。

今後、また実装する自分のため、そして今後STUDIOを使って同じようにプルダウンメニューを作成される方に向けて実装方法をまとめておきます。

完成形はこんな感じです。

こちらは私の事業サイトなのですが、この「事業内容」のプルダウンを実装します。

STUDIOのプレビュー画面はこちら

駆け出しフリーランスこそポートフォリオが大切！載せるべき項目とその理由【経験談】「駆け出しWebデザイナーはポートフォリオが必要？」実際にフリーランスとしてWebデザイナーをしながら、発注者としての経験もある私が、「ポートフォリオが必要だと思う理由と、実際に制作する際にぜひ掲載して欲しい項目」についてお話します。この記事を読めば、ポートフォリオに必要な項目も分かる！...

1.プルダウンメニューの構造

STUDIOで実装したプルダウンメニューの構造はこんな感じです。

複雑そうに見えますが、順番に作成していくことで普段、コーディングをがっつりやっていない人でも実装できます。

具体的な手順について、解説していきます。

2.プルダウンメニューの設定方法

実際の画面を載せながら解説していくので、是非読みながら一緒にSTUDIOを操作してみてください！

1.メニューの表面を実装

まずは、このようなメニューの表面を作っていきます。

構造はこんな感じ

「Image」には、サイトのロゴ、「Text」にはメニューの項目を入力しています。

Boxにヘッダーメニュー以外の要素を追加していると、プルダウンが上手く作動しない場合があるので

こちらのBoxはヘッダーメニューのみを入れるようにしてください。

私は、ヘッダーメニューのBoxの中にファーストビューの要素を入れていたことで何度やり直してもうまく作動せず、大苦戦しました。

2.プルダウンにしたい項目をグループ化

今回は「事業内容」をプルダウンにしたいので、「事業内容」のテキストをグループ化します。

3.プルダウンメニューを追加

「事業内容」の中に「ホームページ制作」と「ロゴデザイン」のプルダウンにするテキストを追加します。

2で作ったグループの中に、さらに〈group〉を作成し、「ホームページ制作」と「ロゴデザイン」のテキストを追加します。

配置を「絶対位置」にして、位置を調整します。

プルダウンの項目を追加する際は、ここのテキストを追加してください。

4.開閉させるモーション追加の下準備

3で設置したプルダウンメニューを「事業内容」にカーソルを合わせた時のみ表示されるよう、inhoverの設定をしていきます。

普段、HTMLやCSSをあまり触らない人にはややこしいかもしれませんが、inhoverを設定するためには、その親要素にhoverを設定する必要があります。

今回でいうと、「事業内容」とプルダウンメニューが入っているグループが親要素、「ホームページ制作」と「ロゴデザイン」が入っているのが子要素なので、親要素にhoverを設定していきます。

親要素の〈group〉を選択して、右上の「hover」をクリック。

その状態で以下の設定をします。

あくまでもhoverを設定することが目的なので、見た目は変わらないような設定をしています。

5.開閉させるモーションの追加

その後、子要素の〈group〉を選択し、通常時はプルダウンが見えないようにします。

右上の「inhover」を選択し、「事業内容」にカーソルがあったときに表示させる設定をします。

このヘッダーメニューのように、カーソルがあったときに文字の色が変わる設定をしたい場合は「Text」のhoverを選択して、設定すると出来ます！

「hover」と「inhover」はややこしいですが、慣れると色々な表現ができるようになるので、ぜひ使ってみてください。

6.プルダウンメニューの完成！

実際にプレビューで確認してみて、しっかり動いていれば完成です。

必要に応じて、フォントや文字色を変更するなどアレンジしてみてください！

3.最後に

ノーコードツールを使用するにあたっても「HTMLやCSSの基本的な知識があること」で随分やりやすくなるな、と実感しました。

以前、こちらの記事でもお話ししているので、気になる方は合わせて読んでみてください！

【実体験】Webデザイン勉強中に、やっておいてよかったこと5選Webデザインの勉強を始めたけど、何をすればいいのか分からない！実際に未経験からフリーランスWebデザイナーになった経験をまとめてみました。...

また更新します。

なおでした。