メニューには、配置方法や表示方法により、横並び型、縦並び型、タブ型、ツリー型、プルダウン型、フォームを使ったオプションメニュー型、ポップアップ型などがあります。

※オプションメニュー型にプルダウンメニューを含む場合もある。

メニューサンプル

メニューを作る場合、実に様々な要素が加わります。

検討課題として
 文字の長さ・バランス
 配置(縦横・左右レイアウト)
 どうやって作る(JavascriptかCSSかFlash等の技術面)
 どの様なデザインを使うのか(テキスト、画像)
という選択肢があります。

お客様から「○○メニューで!」と簡潔に依頼されることがありますが、上記の要素に加えて、サイト全体でうまくマッチングするようなデザイン・配色・配置・サイズについて、試行錯誤を幾度となく繰り返す作業が実は必要です。

また、Flashやフレーム構成でメニューを作る場合は、メンテナンス性やSEO対策に不利なことも考慮しなければいけません。

タブ(横並び)

タブメニュー(A)












タブメニュー(B)


透明タイプ(選択は文字色)



透明タイプ(選択は形状変化、全体色変化)


タブメニュー(C)


パターン1、2



パターン3、4


タブメニュー(D)


パターン1、2、3



パターン4、5、6、7


タブメニュー(E)


タブの重なり



色分け


タブメニュー(F)


同系


選択を強調


タブメニュー(G)





top

横並び

メニュー(バリエーション)


パターン1、2



パターン3、4


top

縦並び

マウスを重ねると画像が置き換わります

サンプル1








サンプル2








サンプル3








サンプル4







色違いによるバリエーション









フロート

フロートメニュー スクロールするとメニューが動きます(S-jis対応)

top