tabindexギミック

とりあえずFirefoxの代替スタイルから構築中。以前のスタイルはナビゲーション的に相当に気を使って書いたので割りと気に入っていたんだけど、消えたものをイチから書くのってしんどい。というか無理だわこれ。てなわけで、前回が正統派ならば今回はややイカレポンチキな感じで書こうと思い、今まで試したことの無い手法を若干取り入れてみた。その名も「tabindexハメ」。

:hover技術による２コマアニメーションナビゲーションは対応ブラウザの普及により地味に浸透してきたように思います。便利（？）で楽しい（！）技術ですが、該当エリアにカーソルを乗せている状態でないと表示されないという問題がありました。問題というか、そういう仕組みでした。今回はこの概念をtabindexを使って取り除いてみませう。

とりあえず、その「ぴょん」と出てくるピョン吉ナビ部分に対しtabindex属性をつけます。おすすめは「1」です。ほんで、現在お使いの:hoverギミック部分、例えば・・・

div.navi ul {
display:none;
}

div.navi:hover ul {
display:block;
}

というようなスタイルだったとします。こいつにもう一個、ネタを仕込みます。

div.navi ul {
display:none;
}

div.navi:hover ul,
div.navi:focus ul {
display:block;
}

つまり、選択（focus）されている状態でも非表示なものを表示させることができるわけです。tabindexが1ならば最初にtabキーを押せば「ピョン」と。しかし、それ自体はあまり意味の無い動きで、重要なのはfocusされていれば常に表示されているのだから、<div class="navi" tabindex="1">の部分を一度クリックしてしまえば表示させたままページ内の閲覧も可能だと。そういうことになります。このサイトの代替スタイルで実験中ですのであなたがFirefoxerであれば一度見ていただければ幸いです。もっとも、その部分以外はなーんも考えてないので著しくクソですけど。

んで、だったら最初から表示させておけと、そう申される方々もおられるかもしれませんが、それはそれ。これはこれってことで。

応用編として、focus状態を半透明にしてみた。さらにその状態でhoverると不透明に。いようFirefox、あんた・・すげえよ！

Powered by Movable Type Version 3.31-ja

« 114 »