スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

折りたたみ方「Ver.2編」 
2005 09 21
Wed 20:03:22

カスタマイズ  Comment 0  Trackback 0  edit.

前記事に引き続きVer,2スクリプトでの折りたたみメニュー追加設定法です。
タブメニュー開閉スクリプトVer.2の記事を参考にして下さい。

詳しくは以下を。
スクリプトはVer.1と全く違いますので前回の方法とは違いますが基本的な考えは同じです。(レイヤー構造を使っているため複雑ですが)

以下が基本のタグ構造です。
<div id="menu1" onclick="showLAYER('sub1');return false" onmouseout="hideLAYER('sub1');return false">
<a href="#" class="tab_title" title="パーツタイトル">▽パーツタイトル</a></div>

<div id="sub1" onmouseover="showLAYER('sub1');return false" onmouseout="hideLAYER('sub1');return false">

パーツ本体はここに入ります。

</div>

上のタグが基本ですが、ここでも気をつけなければいけないのは『番号の重複はしない』『タイトルとパーツ本体の ID 番号は同じ番号にする。』と言う事です。
他にもこのバージョンはマウスが外れた時に表示を消すと言う機能がありますので
id="menu1"
onclick="showLAYER('sub1');
onmouseout="hideLAYER('sub1');
id="sub1"

以上の数字を同じ番号にする事を忘れないで下さい。
(IT4シリーズのテンプレートはすでにVer.2仕様になっていますので番号は7番から)

詳しい説明は、前回の記事と基本的には同じなので省きます。

スタイルの設定ですが、タグ本体が複雑ですので、直接書き込むのでは無くスタイルシートに使用したID番号を使って設定して下さい。
#menu1 {width: auto;font-weight: bold;text-align: center;}
#sub1 {width:180px;text-align: center;visibility: hidden;}

などのように設定すると細かな設定も出来るでしょう。

スクリプトに関しては、自作では無いので詳しい説明などは出来ません。
Ver.1との違いは、『現在のパーツ本体が表示か非表示か判定する』という事です。
これによって初期設定(visibility: hidden;)で表示を消しています。

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。