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

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ここでホバー後の画像の横幅を決めています。自分が使いたいサイズにあわせましょう。

5. 完成

Domo Page

Track Back

THE HAM MEDIA

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

ネタ元:jQueryを使ってApple風デザインのナビゲーション | CSS Lecture ちょうどjQueryのプラグインを探していたときに、 この...

by THE HAM MEDIA  

Comments

ノブ

ノブ

すみません。

質問件ですが、解決いたしました。
id名が問題で、IEは、スプリクト読み込まない見たいです。
名前を変更すると、動作しました。

大変ご迷惑お掛けしました。

2010年01月08日 15:30

ノブ

ノブ

いつも・・感想させて頂いています。

今回テンプレートの入れ替えで、新しくスプリクトを使おうと思いスプリクトの設置をしていますが、今回のApple風デザインのナビゲーションを入れると、サファリー・ファイヤーホックスでは、動作するのですがIE8では、全部のスプリクトが、動かなくなります。Apple風デザインのナビゲーションのスプリクトを外すと動きます。IEで動くような対策は、ないでしょうか?

2010年01月06日 15:39

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article