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

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

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

ツーールバー開閉メニューテスト 
2008 03 16
Sun 15:06:13

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

春に向けてテンプレートのデザイン変更を行ってますが、ちょっとスクリプト(ツールバーメニュー)をスクリプトを使用しないでマウスオーバーなどを使ってみようと思いました。
以前から、クリックオープンだと面倒かな?と思ってまして、以前にもマウスオーバーを使用したメニューはチャレンジしてみたことが在るのですが、その時は動作が不安定と言うか、理解していないで力業を使用してました。(^^;
たまたま新管理画面のメニューを見ていて「これ使えるかな?」と、意気込んでみましたが・・・・
今の所、メニュータイトルとコンテンツにそれぞれマウスオーバー処理をさせて居るため、場合によってはタイトルから離れるとコンテンツがあっという間に消えるかも知れません。
本来は、在る程度の時間差をかけて処理させたいところですが、相も変わらず理解しないで「大旨、こんな感じ?」という手法w
まぁ?動いているので良いですけど。
後は、他のブラウザで動くのかどうなのか?
それと本来の「ブロック指定で表示・非表示は出来ないのか?」を実現できれば、完了ですね。
でも今のでも自分的には困りませんが、見に来る人が「以前の方が良い」と、言われれば・・・修正?(^^;

とは言え、人生諦めムードからの脱却をこんな事で出来るのでしょうか?(自業自得と言うヤツですか・・・ね(^^; )

やはり火狐では動かないので只今、旧バージョンを使用中。(残念(ToT))

テストテンプレート

詳しくは追記記事で。

  <ul id="toolmenu" class="off"
  onfocus="this.className='on';"
  onblur="this.className='off'"
  onmouseover="this.className='on'"
  onmouseout="this.className='off'"
  onactivate="this.className='on'"
  ondeactivate="this.className='off'">
  <a href="index.html">■メニュー</a>
  <li>PROFILE</li>
  <li>LINK</li>
  <li>ETC</li>
  </ul>

実際に良く使われている書き方。(■メニューにマウスが乗るとPROFILEとかLINKが表示される。マウスが外れると消える。※スタイルシートにwidthやheight.overflowを設定で■メニューが見えるように設定する・・・が説明省く)
しかしこれだと、マウスが乗るメニュータイトルとコンテントを同じブロックに書かなければならなくなる。
そこで適当に考えた。(それが下の書き方)

  <li id="toolmenu"
  onmouseover="toolboxsub1.className='on';"
  onmouseout="toolboxsub1.className='off';"
  onfocus="toolboxsub1.className='on';"
  onblur="toolboxsub1.className='off'"
  onactivate="toolboxsub1.className='on'"
  ondeactivate="toolboxsub1.className='off'" >PROFILE</li>

これじゃ無理かな?と感で書いてみたタグ
 this ”を消したいブロックのID名に変更してみたわけだ。
すんなりIEで動きました。w(一応、Firefox以外なら動作する)

  ■上のタグで下のブロックを表示・非表示しているわけですよ。

  <div id="toolboxsub1" class="off"
  onfocus="this.className='on';"
  onblur="this.className='off'"
  onmouseover="this.className='on'"
  onmouseout="this.className='off'"
  onactivate="this.className='on'"
  ondeactivate="this.className='off'">
  ハロー!
  </div>

ちなみにハロー!のブロックからマウスが外れても消える様にしてあります。

  スタイルシートに次を追加。

  .on {display: none;}
  .off {display: block:}


  overflowを使ったり、両方使ったりしたが、やはりFirefoxだけ動作しない。


一応、一番上のタグが基本形と言うことです。
this.classNameは「このブロックのクラスネームを」別のクラス名に変更したり出来る書き方なのですが、これではコンテンツ(ハロー!のメッセージ)をメニューから扱えない訳です。
そこで、toolbox_sub1.classNameと言うようにthisを単純に入れ替えてみたら、Firefox以外なら動くのです。
何故、Firefoxでは動かないのか理解不能????
リファレンスが無いかとネットで調べましたが、かなり昔に観た記憶のページが見つからない。
IE以外動かないと言うなら、根本的に間違っているのだろうが、これは何が原因なのかわたしゃ?分かりませんがな(^^;
分かる人居たら教えてくださいませ。(謝礼は無いけどw)
-(ハイフン)とか_(アンダーバー)をIDやClass名に使わない方が良いと言われているがまさかこれが原因とは考えにくい。
と言うことは、全てのブラウザで動作する、this.className を使って考えろと自分の力量はいっているのだろう。(無理w)

やはり基本から勉強しろと言うのだろうか?(やだw)

ジャンル [ 趣味・実用 テーマ [ こんなのどうでしょうか? ]

Re comments.

Comment form.

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

Trackbacks.

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