【STUDIO】 プルダウンメニューの実装
はじめまして、学生エンジニアの nekoya です。
Web・UIデザイン、Web・スマホアプリ開発、3DCG制作など、デジタル領域で日々幅広く制作活動を趣味でしています。
今日は最近お気に入りの次世代Webデザインプラットフォーム「STUDIO」で様々なプルダウンメニューを実装する方法を紹介してみようかなと思います。
参考: https://pulldown-menu.studio.design/
↑ 最終的にこんな感じの物ができます
今後不定期でSTUDIOの面白い使い方を紹介していこうかなと思いますので、興味のある方は是非フォローをお願いします。
STUDIO とは
「STUDIO」は、ブラウザ上で利用することができるコーディング不要のWebサイト作成ツールです。日本語対応、インストール不要、基本無料。
先日アニメーションやCMS機能などを搭載した「STUDIO3.0」が正式リリースされました。
プルダウンメニューとは
「そもそもプルダウンメニューって何?」という人のためにすごく適当に説明します。
Webサイトのメニューバー・ナビゲーションバーの項目を選んだ(ホバーした)時にその項目の下に表示されるサブの項目一覧メニューのことです。
それでは本題に入ります。今回は以下の3種類のプルダウンメニューをSTUDIOで実装する方法を紹介します。
1. 基本的なプルダウンメニュー
まずは基本的なプルダウンメニューを実装していきます。
↑ 完成するとこんな感じ
それでは実装方法の説明に入ります
①-1 SiteLogo とメニューテキストをグループ化したヘッダーボックスを作ります
①-2 メニューテキストを2回グループ化します
※ 後からメニューを複数個に増やせるように、2回グループ化しています
( ①-3 ヘッダーボックスのスタイル(色・ホバーなど)をいじります )
②-1 メニューのテキストと同じ階層にテキストをグループ化したプルダウンメニュー用のボックスを追加します
( ②-2 プルダウンメニューのスタイル(色・フォントなど)をいじります)
③-1 プルダウンメニューの配置を絶対位置にし、配置場所を設定します
(③-2 プルダウンメニューの項目の数を任意の数に増やします)
④-1 プルダウンメニューボックスを初期状態では表示しないようにします
④-2 プルダウンメニューボックスの in:hover の設定をします
( ⑤-1 任意の数にメニューを増やす )
これで実装手順は完了です!
ライブプレビューで上手く実装できたか確認してみてください!
2. STUDIO 公式ページのプルダウンメニュー
応用編として、STUDIO公式ページで使用されている素敵なプルダウンメニューを再現していきたいと思います。
基本形の実装ができていればスタイルを変えるだけで完成します。
↑ 完成するとこんな感じ
それでは実装方法の説明に入ります。
① 基本形のプルダウンメニューをヘッダーボックスごとコピーする
②-1 ヘッダーボックス周辺のスタイルを変更する
②-2 プルダウンメニューボックス周辺のスタイルを変更する
これで実装手順は完了です!
STUDIOの公式ページのようなプルダウンメニューができたと思います!
3. LIGのWebサイトのようなプルダウンメニュー
最後に発展編として株式会社LIGのコーポレートサイトのようなプルダウンメニューを再現していきたいと思います。
↑ 完成するとこんな感じ
それでは実装方法の説明に入ります。
① 基本形のプルダウンメニューをヘッダーボックスごとコピーする
② ヘッダーボックスとSiteLogoのテキストのスタイルを変更します
( ③-1 作業しやすいようにプルダウンメニューを標準状態で見えるように一時的に戻します )
③-2 プルダウンメニューボックスのスタイルを変更します
STUDIO では絶対位置のボックスのwidthをvw で指定することができないので、width: 4000% にすることで、無理やり画面幅いっぱいにボックスを展開しています。
現状のSTUDIOは画面幅を超えた要素は自動で隠れるようになっているので、その特性を利用していますが、STUDIO自体の実装方針が変わり、上手く機能しなくなる可能性があります。
この時ボックス内アイテムの配置が左揃え以外になっていると、通常の画面サイズではプルダウンメニュー内の項目(の一部)が画面外に消えてしまいます。
今回は左揃えのプルダウンメニューを実装していますが、基準点を画面右端にして同様の設定をすることで、右揃えのプルダウンメニューも同様に実装できます。(中央揃えは実装方法の問題で不可能です)
( ③-3 プルダウンメニュー内のテキストに矢印アイコンを追加してグループ化し、レイアウトを調整します )
③-4 プルダウンメニュー内のアイテム一覧をグループ化します
④-1 プルダウンメニューボックスと今グループ化したボックスを初期状態のモーションを設定します
④-2 プルダウンメニューボックスの in:hover の設定をします
④-3 メニューの数を任意の数に増やし、それぞれプルダウンメニューの絶対位置の調整をします
※ メニューを増やすごとに、そのメニュー内のプルダウンメニューボックスの絶対位置の左の値を -120px してください。この設定を忘れるとボックスの始まりが変な位置から始まってしまいます
この時点で以下のようなアニメーションができていると思います
これでも十分完成していますが、完成度をより高めるために、メニュー部分のアニメーションを追加していきます
⑤-1 メニューのテキストにサブテキストとホバー時に表示される青丸を追加し、この3つのアイテムをグループ化します
⑤-2 青丸をグループ化し、配置を絶対位置にします
⑤-3 ホバー関連のモーションを設定します
( ⑥-1 任意の数にメニューを増やす )
これで完成です!
やってみて思いましたが、リッチなプルダウンメニューが必要になったら大人しくJavaScript 利用した方が効率は良いかもですね。
(個人的にはツールハックみたいなこと好きなので楽しいんですが。。。)
こちらに実際に3パターン実装したサイトを公開しました!
実際に動くものを確認したい方はこちらから確認してみてください!
また実際のSTUDIOのエディターを見たい・コピペしたいといったご要望があればプロジェクトに招待しますので、TwitterのDMなどでご連絡ください!
長くなりましたが、ここまで読んでくださりありがとうございました!
励みになりますので、もし気に入って頂けたらいいねとフォローの程よろしくお願いします!
3DCG の最新情報・技術を学ぶためのWeb メディアもやっているので良ければこちらも見に来てください!
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?