 |
メニューの色を変更する |
「HTMLソース」を開き、上部あたりにある以下の行を探します。
1.
customtheme から始まる行の // を消します。
2.
"#1c5a80", "#18374a" の#1c5a80 と #18374a の部分を好きな色に変更します。
色番号はビルダーのカラーパレットや、検索エンジンで カラーチャート などのキーワードで
検索して好みの色を探してください。
この2つの色は以下のような意味になります。
"#1c5a80", "#18374a"
"初期状態のメニュー色", "マウスオーバーのメニュー色"
修正前
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
修正後
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
customtheme: ["#003e5b", "#006393"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
備考
// は JavaScriptでのコメント（その行は無視される）です。
先頭に // が付いている行は無視されますが、上記操作で有効にしています。
| |
スライドする速度を変更する |
テキストエディタで ddsmoothmenu.js を開いて以下の行を修正します。
初期状態で 300 となっている部分がスライドの速度です。
値を大きくするとスライドの速度が遅くなり、小さくすると速くなります。
修正前
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
修正後
transition: {overtime:1000, outtime:1000}, //duration of slide in/ out animation, in milliseconds
| |
影の大きさを変更する |
テキストエディタで ddsmoothmenu.js を開いて以下の行を修正します。
初期状態で 5 となっている部分が縦横の影の大きさです。
値を大きくすると影が大きくなり、値を小さくすると影が小さくなります。
修正前
shadow: {enable:true, offsetx:5, offsety:5},
修正後
shadow: {enable:true, offsetx:2, offsety:2},
| |
矢印アイコンを別のものにする |
初期状態では「下向き矢印がdown.gif」、「右向き矢印がright.gif」となっており、
変更する場合はこれらの画像を別のものにしてやれば良いのですが、ファイル名を
変更したい場合は以下の行を修正します。
例えば down.gif を sita.gif に、 right.gif を migi.gif に変更する場合は以下のように修正します。
修正前
arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},
修正後
arrowimages: {down:['downarrowclass', 'sita.gif', 23], right:['rightarrowclass',
'migi.gif']},
備考
23 の数値は下向き矢印アイコンと文字とのスペースを示します。
値を大きくすると矢印アイコンとの距離が大きくなり、小さくすると近くなります。
| |
メニューを背景画像で指定する |
メニューは色で指定していますが、これを url(画像のパス) とする事で
メニューの背景画像を指定する事ができます。
左側が「通常時のメニュー背景画像」、右側が「マウスオーバーのメニュー背景画像」です。
修正前
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
修正後
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
customtheme: ["url(menu1.gif)","url(menu2.gif)"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
備考
HTMLファイルと同ディレクトリに背景用画像がある場合は上記のようにファイル名だけ指定します。
HTMLファイルのディレクトリに image というディレクトリを作成して、その中に画像を格納している
場合は images/menu1.gif などと指定します。
| |
正しく動作しない場合は？ |
操作後にプレビュー画面でエラーが出てしまう場合は、余分な箇所が
削除されたり追加されてしまっている可能性があります。
「編集」 → 「元に戻す」 で元に戻して再編集するか、上記ソースを参考に修正して下さい。
IEで影が残ってしまう場合
以下のページをご参照下さい。
https://aimix.jp/smoothnavitrb.html
|
