THE HAM MEDIA BLOG

Mootoolsでグラデーションのように変化するナビゲーション「Fancy Navigation」の設定の仕方

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
ナビゲーション
mootools
javascript

Mootoolsでグラデーションのように変化するナビゲーション「Fancy Navigation」の設定の仕方

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も動作しないわけではないので、
設定しても特に問題はないと言えるでしょう。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。