CSS SpriteのメニューをjQueryを使ってフェードさせるプラグインhoverFade

このプラグインはCSS Sprite(CSSで指定した背景画像を一枚にまとめてホバー時など個々にbackground-positionで位置を設定する手法)でホバー時の設定をしているのでjsの効かない環境でもフェード無しのホバーアクションを実行できる。
CSSの設定は少し増えるがhtmlのソースは至って自然。念のためIE6〜8でも確認したところ問題なく動作しました。

Example Dan Wellman » Plugin Update: hoverfade-1.0.2

Code

JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../../assets/js/jquery.hoverfade-1.0.2.js"></script>
$(function(){
$("#nav01, #nav02").hoverFade();
});

CSS

ul,li{
list-style:none;
margin:0;
padding:0;
}
.clear {clear:both;}
/*---------nav00----------*/
#nav00 li {     
display:block;
overflow:hidden;
float:left;
text-indent:-9999px;
list-style-type:none; 
float:left;
}
#nav00.hover-css a, 
#nav00.hover-anims a, 
#nav00.hover-anims span {
display:block;
width:120px;
height:30px;
position:relative;
background-image: url(../../../assets/images/gn02.jpg);
background-repeat: no-repeat;
background-position: 0 top;
}
#nav00.hover-anims span { position:absolute; left:0; top:0; }
#nav00.hover-css .home a, 
#nav00.hover-anims .home a, 
#nav00.hover-anims .home span {background-position:0 top;}
#nav00.hover-css .home a:hover,
#nav00.hover-anims .home span {background-position:0 bottom;}
#nav00.hover-css .about a, 
#nav00.hover-anims .about a, 
#nav00.hover-anims .about span {background-position:-120px top;}
#nav00.hover-css .about a:hover,
#nav00.hover-anims .about span {background-position:-120px bottom;}
#nav00.hover-css .contact a, 
#nav00.hover-anims .contact a, 
#nav00.hover-anims .contact span {background-position:-240px top;}
#nav00.hover-css .contact a:hover,
#nav00.hover-anims .contact span {background-position:-240px bottom;}
/*---------nav01----------*/
#nav01 li {     
display:block;
overflow:hidden;
float:left;
text-indent:-9999px;
list-style-type:none; 
float:left;
}
#nav01.hover-css a, 
#nav01.hover-anims a, 
#nav01.hover-anims span {
display:block;
width:120px;
height:30px;
position:relative;
background-image: url(../../../assets/images/gn02.jpg);
background-repeat: no-repeat;
background-position: 0 top;
}
#nav01.hover-anims span { position:absolute; left:0; top:0; }
#nav01.hover-css .home a, 
#nav01.hover-anims .home a, 
#nav01.hover-anims .home span {background-position:0 top;}
#nav01.hover-css .home a:hover,
#nav01.hover-anims .home span {background-position:0 bottom;}
#nav01.hover-css .about a, 
#nav01.hover-anims .about a, 
#nav01.hover-anims .about span {background-position:-120px top;}
#nav01.hover-css .about a:hover,
#nav01.hover-anims .about span {background-position:-120px bottom;}
#nav01.hover-css .contact a, 
#nav01.hover-anims .contact a, 
#nav01.hover-anims .contact span {background-position:-240px top;}
#nav01.hover-css .contact a:hover,
#nav01.hover-anims .contact span {background-position:-240px bottom;}
/*---------nav02----------*/
#nav02 {
width:200px;
height:90px;
}
#nav02 li {     
display:block;
overflow:hidden;
text-indent:-9999px;
list-style-type:none; 
}
#nav02.hover-css a, 
#nav02.hover-anims a, 
#nav02.hover-anims span {
display:block;
width:200px;
height:30px;
position:relative;
background-image: url(../../../assets/images/gn01.jpg);
background-repeat: no-repeat;
background-position: 0 top;
}
#nav02.hover-anims span { position:absolute; left:0; top:0; }
#nav02.hover-css .home a, 
#nav02.hover-anims .home a, 
#nav02.hover-anims .home span {background-position:left top;}
#nav02.hover-css .home a:hover,
#nav02.hover-anims .home span {background-position:right top;}
#nav02.hover-css .about a, 
#nav02.hover-anims .about a, 
#nav02.hover-anims .about span {background-position:left -30px;}
#nav02.hover-css .about a:hover,
#nav02.hover-anims .about span {background-position:right -30px;}
#nav02.hover-css .contact a, 
#nav02.hover-anims .contact a, 
#nav02.hover-anims .contact span {background-position:left -60px;}
#nav02.hover-css .contact a:hover,
#nav02.hover-anims .contact span {background-position:right -60px;}

html

<h3>CSS ONLY</h3>
<ul id="nav00" class="hover-css">
<li class="home"><a href="#" title="Home">HOME</a></li>
<li class="about"><a href="#" title="about">Favorit</a></li>
<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
<h3>Fade1</h3>
<ul id="nav01" class="hover-css">
<li class="home"><a href="#" title="Home">HOME</a></li>
<li class="about"><a href="#" title="about">Favorit</a></li>
<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
<h3>Fade2</h3>
<ul id="nav02" class="hover-css">
<li class="home"><a href="#" title="Home">HOME</a></li>
<li class="about"><a href="#" title="about">Favorit</a></li>
<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

16 − eight =