cssナビを使っているところは非常に多い！
自分もまだ使っている。
でも、色々なところで議論されているように気になってはいる。
- SEO的に良いのか悪いのか
- javascriptがOFFの画像OFF環境での問題
- デフォルト印刷の背景OFFの問題
- 音声ブラウザでdisplay:noneが飛ばされる問題
- 他・・・
いつからこんなに面倒な事になったんだろう？
初め、ナビを作るときはjavascriptが主流だった。
Dreamweaverで吐き出されるコードを使いまわしたり、ネットで、ロールオーバーだとかビヘイビアだとかで検索して拾って作っていたが、どれもソースが多くてHTMLがゴチャゴチャするのがいやだった。
しばらくは、シンプルな下のコードを使っていた。
<img src="画像" onmouseover="this.src='マウスオーバー画像'"onmouseout="this.src='元画像'" />
しかし、見ての通りwidthやheightやaltを入れると、ソースが非常に長くなる。
そこでCSSナビが出てきたわけだけど、最近やっぱり気になってきた。
テキスト飛ばして背景画像だけになっているわけだけど、良く考えると邪道に思えてきた。
上に書いた問題点もそうだけど、技術の姿勢だけでもどんどん良くない方向に行っている気がしてならない。
たしかに、デザインに関する記述はCSSで行うのが基本だが、それに徹するためにアホみたいに時間を使っているのがバカらしくも思える。
最近、半透明のIE6対応なんかも使い始めて、CSSがゴチャゴチャしてきた。
なんか打開策もないのに長々と書いてしまったが、結論としてjavascriptメニューに戻そうと思う。
そして、できる限りHTMLのソースを簡潔に！
めんどーなライブラリも読み込まないで、誰でも編集できる簡単なjavascript！
探してみたけどなかなか無いもんだ！
addEventListenerを使って作るところまでは理解できたが、やり方がわからん！
くそっ！
勉強がたりんな！
結果、こんなものができました。
ナビゲーションSAMPLE
HTML
<ul id="menus1"> <li><a href=""><img src="img/menu1.png" id="menu1" width="200" height="30" alt="menu1" /></a></li> <li><a href=""><img src="img/menu2.png" id="menu2" width="200" height="30" alt="menu2" /></a></li> <li><a href=""><img src="img/menu3.png" id="menu3" width="200" height="30" alt="menu3" /></a></li> <li><a href=""><img src="img/menu4.png" id="menu4" width="200" height="30" alt="menu4" /></a></li> </ul>
javascript
function observe(target, type, listener) {
if (target.addEventListener) target.addEventListener(type, listener, false);
else if (target.attachEvent) target.attachEvent('on' + type, function() { listener.call(target, window.event); });
else target['on' + type] = function(e) { listener.call(target, e || window.event); };
}
function overSet(){
this.src = this.src.replace('\.png','_o\.png');
this.src = this.src.replace('\.jpg','_o\.jpg');
this.src = this.src.replace('\.jpeg','_o\.jpeg');
this.src = this.src.replace('\.gif','_o\.gif');
}
function outSet(){
this.src = this.src.replace('_o','');
}
function naviSet(navi){
observe(document.getElementById(navi), 'mouseover', overSet);
observe(document.getElementById(navi), 'mouseout', outSet);
}
window.onload = function(){
naviSet("menu1");
naviSet("menu2");
naviSet("menu3");
naviSet("menu4");
naviSet("menu5");
naviSet("menu6");
naviSet("menu7");
naviSet("menu8");
}
マウスオーバー画像は、『_o』をつけるだけ！
シンプルになったと思うんだけどな～
印刷も問題ないし、SEOも問題ないんじゃない？
参考にしたサイト：
