jQueryを使って領域をスムーズに伸縮するナビゲーション

ネタ元：jQueryを使ってApple風デザインのナビゲーション | CSS Lecture

ちょうどjQueryのプラグインを探していたときに、
この「Kwicks for jQuery」をみつけて、
同じタイミングで、CSS LectureのMIYAさんがエントリーを書いていたので、
僕も使ってみる事にしました。

ただ、そのまま同じのをあげるのもなんなので、
自分で画像も簡単に作って使ってみました。

そして作っているときに、IEでのバグというか、
問題が起こることも見つけたので、それも書いておきます。

サンプル

今回は自分で画像を作っていろいろ使ってみました。

◆使用した画像

　←両サイドの角丸画像

◆スクリプト

$(function() {
    $('.kwicks').kwicks({
        duration: 300,
        max : 200,
        spacing : 0
    });
});

◆HTML

<ul class="kwicks" >
    <li id="kwick1"><a href="#">ホーム</a></li>
    <li id="kwick2"><a href="#">コンテンツ</a></li>
    <li id="kwick3"><a href="#">問い合わせ</a></li>
    <li id="kwick4"><a href="#">サイトマップ</a></li>
</ul>

◆CSS

このCSSはこのブログ用にカスタマイズされたものです。

.kwicks {
	list-style: none;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
}
.kwicks li{
    display: block;
    float:left;
	overflow: hidden;
	padding: 0;
	margin-right: 0px;
	cursor: pointer;
	width: 115px;
	height: 45px;
	_height:50px;/*for IE*/
	background:
	   url(http://h2ham.up.seesaa.net/image/08011.png) no-repeat;  
}

.kwicks li a{  
    display:block;  
	height: 55px;
	margin-top:-5px; 
    text-indent:-9999px;
    outline:none;  
}  

#kwick1 { 
	background-position:0px 0px;
}
#kwick2 {
	background-position:-200px 0px;
}
#kwick3 {
	background-position:-400px 0px;
}
#kwick4 { 
	background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover { 
	background-position:0px -58px;
}
#kwick2.active, #kwick2:hover {
	background-position:-200px -58px;
}
#kwick3.active, #kwick3:hover {
	background-position:-400px -58px;
}
#kwick4.active, #kwick4:hover { 
	background-position:-600px -58px;
}

#kwick1 a{  
    background:
        url(http://h2ham.up.seesaa.net/image/08012.png)
        no-repeat left top;  
}
    
#kwick4 a{  
    background:
        url(http://h2ham.up.seesaa.net/image/08012.png)
        no-repeat right -58px;  
}

#kwick4 a:hover{  
    background:
        url(http://h2ham.up.seesaa.net/image/08012.png)
        no-repeat  -58px;  
}  

◆プレビュー

• ホーム
• コンテンツ
• 問い合わせ
• サイトマップ

※IEでみるとちらついたり消えたりしますが一応動作します。

IEでのバグ

実はこれ昨日すぐにつくったのですが、
面白い事にIE6だけ動作しない！！(IE7は未確認)

なぜ！？

なんて思って原因を探ったところ、
<div id="container">となっているところを消したら動作することがわかった。
僕は一番大枠となるdivのidをcontainerとつけているのだけど、
どうもこのidネームのせいで動作しなくなっていたらしい。
kwicks.jsのソースをみると、変数にcontainerが使われているから、
きっとそのせいなんだろうなって思う。

つまり、これを使う時はid="container"を使ってはいけないということだ。

そしてたぶんの話だが、同じようにidと変数が同じになっていると
もしかしたらIEで動作しなくなるので、idとかclassの名前は注意したほうが良さそうだ。

参考サイト：

• Kwicks for jQuery
• Create an apple style menu and improve it via jQuery | Kriesi.at - new media design
• [JS]Mootoolsのように領域をスムーズに伸縮するスクリプト -Kwicks | コリス
• jQueryを使ってApple風デザインのナビゲーション | CSS Lecture