jQueryを使ってApple風デザインのナビゲーション

Category
： Javascript

Kriesi.at

今回の情報元サイトです。Create an apple style menu and improve it via jQuery

こういうナビゲーションって今はそんなに見かける事はないのですが、今後増えていきそうな気がするので詳しく解説していきたいと思います。

1. ダウンロード

まずは情報元サイトの下部あたりにあるダウンロードボタンから、データを一式ダウンロードして下さい。

2. XHTMLの設定

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
</ul>

3. CSSの設定

今回しようする画像はこんな感じです。 Kriesi.at

.kwicks要素の指定

.kwicks {  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding: 0; 
	 background-image:url(no_flicker.jpg); 
}

ここでlist-styleのリセット。キャッシュに対応する為に背景画像を読み込ませておきます。

.kwicks内のli要素。リンク要素の指定

.kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
	float: left;
	width: 125px;
	height: 40px;
	margin-right: 0px;
	background-image:url(kwicks_sprite.jpg);
	background-repeat:no-repeat;
}
.kwicks a{
	display:block;
	height:40px;
	text-indent:-9999px;
	outline:none;
}

.kwicks liに横幅と縦の大きさを指定。（この時は見える要素の大きさだを指定します）.kwicks aにtext-indentでテキストを飛ばし、ブロックレベル要素に変えておきます。

liの一つ、一つの要素に画像を設定

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

background-positionで調整します。

liのホバー後の画像を設定

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

そのページに飛んだ場合classで「active」とつくようになっているので、その時の画像も設定しています。

liの最初と最後に閉じる画像を設定

#kwick1 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: left 0px;
}

#kwick1 a:hover{
	background-position: left -80px;
}

#kwick4 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: right -40px;
}
#kwick4 a:hover{
	background-position: right -120px;
}

以上。jsの設定を行っていない場合はこのようになります。

サンプル

4. javascriptの設定

head内

<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>

custom.js

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

 $(document).ready(function(){					
	my_kwicks();
});

.kwicksって所でclassの設定を行っているので、class名を変更したい場合は、こちらも変更して下さい。
duration: 300ここでナビゲーションのホバー後の動きのスピードを調整しています。数字を大きくすると遅くなります。
max: 200ここでホバー後の画像の横幅を決めています。自分が使いたいサイズにあわせましょう。