▲トップメニューを ヨコ長表示にする。
|
- このタイプのメニューでは、2枚の設定ファイルと、4種類のメインファイル、
そして小さな画像ファイル2枚を必要とします。
※ 使用されるメインファイルはそのうち1枚で、閲覧者のブラウザにより選択させています。
- BL_style_DarkKhaki.js ( スタイル設定ファイル )
- BL_item.js ( 項目設定ファイル )
- BL_main.zip ( 以下のファイルを梱包したもの )
-----------------------------------------
3.-1 BL_main_IE5.js ( for Internet Explorer )
3.-2 BL_main_NN4.js ( for Netscape4 )
3.-3 BL_main_NN6.js ( for Netscape6 )
3.-4 BL_main_OP7.js ( for Opera )
-----------------------------------------
- BL_arrow.zip (
画像ファイルの詰め合わせ )
■
他のスタイル設定のサンプルは、左のメニュー *印 の付いた項目にあります。
■
項目設定ファイルは、Item1 Item2 ... の形式に書き直してあります。
※ *.js ファイルは 構造化エディタで整形されています。設定ファイルの編集を
効率的に行うことができるので、
是非
ダウンロードして使用されることをお奨めします。
※ 構造化エディタとは?
一見シンプルなアウトラインプロセッサなのですが、
空白行、タブ、スペース といった視覚的には無意味な文字を使ってテキストファイルを構造化
していきます。アウトラインの階層情報をドットなどで表現している訳ではないのでプログラムソースに
影響を与えることはなく、他のエディタで開いても問題無く読むことができます。
- 上記ファイルのうち 1. と 2. を HTMLの<HEAD>内
または <BODY>内の任意の位置で ( 1. 2. の順で )
読み込ませます。
- 3.-1 〜 3.-4 のファイルは任意のディレクトリに一緒に入れ、 1. の設定ファイルに
そのパスを記述します。
- 設定する値についての説明はファイル内にコメント文で記述してあります。
最適な状態にはなっていませんので、適宜修正して下さい。
スタイル設定ファイルのサンプル
項目設定ファイルのサンプル
※ ReadMe ファイルのようなものは用意していません。
以降の文章が参考になればと思います。
▼ 設定する値 についての補足。
- 幅や高さ、位置、ボーダーサイズ、パディングなどで 説明なく使われている数値の単位は
ピクセル(px) ですが、"px"
は付けません。
- テキスト周りのパディングでは、Netscape4 を考慮した関係で 0 を設定しても実際には
0 にならない場合があります。
- ボーダーのスタイル、 "outset" や "inset" については、ボーダーカラーで表現する方法があります。
枠線 の 明るい部分 と 暗い部分 の 2値を指定すると、立体的になるように
あるいは 窪んだ感じになるように、ボーダーカラーを設定します。
ブラウザに任せる場合は、空文字("") に しておきます。
※ ブラウザによる配色の違いを考慮した処置ですが、Netscape4 では扱いが異なります。
- 必要とされる値が二者択一の場合、true ( する ) 、false ( しない ) のどちらかを
指定しますが、true の場合 1 、false の場合 0 で代用してもかまいません。
- アイテム (項目) 内のテキスト改行について
テキストの文字数が指定したアイテムの幅を超えるような場合、テキストは改行されます。
マウスを乗せた時のみテキストが改行されてしまうといった場合
アイテムの幅を広げるのが最善なのですが、
次の方法でもうまくいくかもしれません。
(項目設定ファイルを編集します)
- 文字列内で <BR>> を使って改行位置を指定してしまう。
- ほんの少しで改行されてしまうような場合、<NOBR> で改行させない。
▼ いくつかの気になる点。
- <BODY>、<DIV>エレメントへの スタイルルールの影響を受けること。
- onload、onunload、などのイベントが他のスクリプトに上書きされる可能性。
- 変数名、関数名、エレメントのクラス、ID名の競合。
- 既知の問題。
- Opera でのドラッグにおけるデフォルト動作を回避出来ない問題。
- Opera でステータスバーへの URL表示がうまく出来ない問題。
- Netscape6 でのドラッグにおけるマウスへの追随性がよろしくない問題。
- Netscape4 でボーダーを 0 にするとパディングが反映されない問題。
画像( )の表示位置がずれる時がある。(更新すると直る)
|