THE HAM MEDIA BLOG

Mootoolsを使ったナビゲーション、
「Fancy Navigation with MooTools Javascript」
というのがあったので試しに使ってみた。

ところがそこにのっているままの設定だと、
ちょっとだけチラついた動作があるだけで、
Demoでのっているような動きをみせてくれない。

なんでだ？

と思って試したら、書いてある設定が足りなかっただけみたいなので、
それもあわせて書いておきます。

設定方法

基本的に、オリジナルのサイトで書いてある通りです。

■HTML

<ul>
	<li><a href="#" class="nav">Nav Item 1</a></li>
	<li><a href="#" class="nav">Nav Item 2</a></li>
	<li><a href="#" class="nav">Nav Item 3</a></li>
	<li><a href="#" class="nav">Nav Item 4</a></li>
	<li><a href="#" class="nav">Nav Item 5</a></li>
	<li><a href="#" class="nav">Nav Item 6</a></li>
	<li><a href="#" class="nav">Nav Item 7</a></li>
	<li><a href="#" class="nav">Nav Item 8</a></li>
	<li><a href="#" class="nav">Nav Item 9</a></li>
	<li><a href="#" class="nav">Nav Item 10</a></li>
</ul>

■CSS

今日一番のポイントはこのCSSの設定。
必要なのは:hoverの設定！

a.nav{
    display: block;
    padding: 10px;
    color: #ddd;
    background: #000;
    width: 200px;
    text-decoration: none;
    border-bottom:1px solid #ddd;
}

a.nav:hover{
	color: #000;
	background: #eee;
	text-decoration: none;
}

hoverしたときのbackgroundを指定しておかないと、
綺麗なグラデーションが起こらない。
話ずれずに設定しよう。

■JavaScript

先にMootoolsを読み込んでから下記のスクリプトを記述します。

window.addEvent('domready', function() {
	$each($$('a.nav'),function(el) {
		el.addEvent('mouseenter', function() {
			el.highlight(el.getStyle('background-color'),'#333');
		});
		el.addEvent('mouseleave', function() {
			el.highlight(el.getStyle('background-color'),'#000');
		});	
	});
});

IE6はスムーズではない

IE6だとなんだかうまくグラデーションしない様子。
一応動作はするけど、スムーズではないみたいだ。

ただ、他のブラウザではどれも綺麗ですし、
IE6も動作しないわけではないので、
設定しても特に問題はないと言えるでしょう。