TAテーマ001 スマホのドロップダウンメニュー

TAテーマ001 スマホのドロップダウンメニュー

テーマ001情報
TAテーマ001 スマホのドロップダウンメニュー

 

スマートフォン用のサイトによくあるドロップダウンメニューをご存知でしょうか?

add_exp1

上図の様に開閉ボタンをタッチするとメニューがドロップダウンします。

一般的にはドロップダウンメニューと呼ばれているスタイリッシュな機能です。

 

もちろん、TAテーマ001のレスポンシブWebデザイン(スマホなどのモバイルデザイン)にもこの機能は準備されています。

TAテーマ001ではドロップダウンメニューを更に拡張してサイドバーやサブサイドバーをドロップダウンします。

通常レスポンシブWebデザインの際に、サイドバーやサブサイドバーはメインコンテンツの後ろに追いやられることが多いです。

しかし、サイドバーやサブサイドバーをドロップダウンで別枠のコンテンツとして扱うことによって、メインコンテンツと同じように目立たせることができます。

TAテーマ001ではこのドロップダウン機能を別のコンテンツ枠という意味合いで『アディショナルモード』と称しています。

 

TAテーマ001の『アディショナルモード』は自由度が高く、開閉ボタンデザインの選択や開閉ボタンとドロップダウン開始端間の吹き出しの有無の選択などの詳細設定ができます。

詳しくは『TAテーマ001』の取扱い説明 R共通設定(アディショナルモード)をご覧ください。

 

TAテーマ001の『アディショナルモード』の更なる特徴は未使用のサイドバー(またはサブサイドバー)を表示できることです。

例えば、パソコン版のホームページのサイドバーはメニュー無しの通常のコンテンツを表示してサブサイドバーは非表示(未使用)という一般的なスタイルがあるとします。

そして、レスポンシブWebデザインの時にのみドロップダウン表示の上部にメニューなどのパソコン版には無いコンテンツを表示したいとします。

さて、どの様に実現したら良いでしょうか?

TAテーマ001の『アディショナルモード』は未使用のサブサイドバーをレスポンシブWebデザインの時にのみ表示させることができますから、上記の要求に容易に対応できます。

実例で説明します。

add_exp2

上図はTAテーマ001の公式サイトのパソコン版の表示です。

メインとサイドバーのフレーム構成でサブサイドバーは未使用です。

更にメニューは、ヘッダー画像の下のグローバルメニューが存在するため、サイドバー上にはメニューコンテンツは配置していません。

下図はレスポンシブWebデザイン時の表示です。

パソコン版では未使用のサブサイドバーにメニューを配置してレスポンシブWebデザインの時にのみ表示させています。

ドロップダウン画面のメニュー(サブサイドバーのコンテンツ)の下からサイドバーのコンテンツが始まっていることがお分かりいただけるでしょうか。

add_exp3

 

『アディショナルモード』の特徴についてご紹介しました。

是非、TAテーマ001の高い自由度の機能を組み合わせて先進的で魅力的な表示デザインを制作してください。

 

お役に立てれば幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing