DDT for Love Collection

Stage 3．メニューのデザイン設定

R H
G S
B V
#

How to use?

Ajaxメニューのデザインを自由にカスタマイズできます。

各項目内容の変更と同時にプレビューを確認しながら設定できます。

カラーピッカーの使い方 テスター

パレットマーク

が付いている入力フォーム内をマウスでクリックして、

テキストエリア内でカーソルが点滅している状態にします。 → 図解

カーソルを点滅させた状態のまま、カラーピッカー内の大きなグラデーション面をクリックしたりドラッグしたり～♪

カラーピッカーで作った色は、テキストエリアにダイレクトに入力されます♪

それでは基本セットアップからスタートして下さい♪ (^o^)y

基本セットアップ

メニュー設置箇所のおおよその背景色

フォント
ヘッダー文字色		sample フォントサンプル

ヘッダー文字色とは、メニュー内のタイトル部分 (タテ表示メニュー最上部の「MENU」という文字など) を指します。

仕切り線

余白

仕切り線とは、メニューの項目と項目との間に表示されるラインです。

余白を設定するコトで、メニュー項目ごとの間隔を指定することができます。

オンマウスアクション

マウスオーバーとは、メニューにマウスが乗った場合の表示パターンです。

オンページとは、メニュー項目のリンク先URLが現在のURLと一致する場合の表示パターンです。

サブメニューとは、通常時に表示されているメニューの項目を、さらに詳しく分類したメニューです。

イメージセットアップ

イメージ		マウスオーバー
サブイメージ		マウスオーバー

イメージとは、メニュー左側に表示される画像です。

サブイメージとは、マウスが重なった場合にサブメニューが表示される項目に限り、メニュー右側に表示される画像です。

【例】
通常時

Contents

マウスオーバー

Contents

フィルターセットアップ

サブメニューに限り、全体に影を落とせます。「影の長さ」はこの影を指します。

フィルターとは、サブメニューが開くスタイルと閉じるスタイルを指します。

あなたのメニューをプレビューでチェック☆ (o^-')b♪

いつでも何度でもプレビューを表示できるから、１つ設定を変えるごとに内容を確認したり微調整したりもできます。
また、プレビューと同時に設定内容が反映されたソースを生成しますので、デザインが完成した時点で表示されているソースをそのままコピぺーすればＯＫ。

デザイン完成♪ソースはどうする？

コピーしたソースを、基本セット内の『 menu_design.js 』にペースト（上書き）して下さい。
ラブコレAjaxメニューのデザインをもっともっと詳細に設定したい場合は、このソースの内容を直接変更してみて下さい。