横メニューナビゲーションの背景画像のアニメーション（横）
■ 横メニューナビゲーションの背景画像のアニメーション（横）
★ 横に背景画像を移動しアニメーションします。
下記例は、左から右に移動します。
● 用意する画像（例）・・・横400px 縦41px です。（実例①参照）
例です。違った画像でも可能です。
（どれか１つ好きな色の画像を使ってください）
◆ 上記画像は、縦が41pxなので、ナビの縦が41px以上の場合は画像を
調整してください。
また、上記の画像の様に斜めの部分が入った画像でなければ
background-repeat:no-repeat; を background-repeat:repeat-y;
すれば、画像が縦に繰り返されます。
下記の様な画像です（実例②参照）
◆ また下記の様な画像を用意して横に移動する速度を上げれば、
光って見えます（実例③参照）
● 実例①
● 実例②
● 実例③
● Topnavi方式を使っている場合（私のブログのＣＳＳ自動作成）
◆ ＣＳＳへ追記
/* ------------------------------------------------------- */
/* 横ナビメニュー（Topnavi用) アニメーション */
/* ------------------------------------------------------- */
#Navilist li a:hover{
background-color:#ffccff;/* カーソルを乗せたときの背景色 */
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:-400px 0px;/* -400px は画像の横幅 */
color: #ffffff;/* カーソルを乗せたときの文字色 */
}
/* 横ナビメニュー（Topnavi用) アニメーション */
/* ------------------------------------------------------- */
#Navilist li a:hover{
background-color:#ffccff;/* カーソルを乗せたときの背景色 */
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:-400px 0px;/* -400px は画像の横幅 */
color: #ffffff;/* カーソルを乗せたときの文字色 */
}
◆ フリープラグインへ追記
<script language="JavaScript">
$(function() {
$('#Navilist li a').mouseover(
function(){
$(this).stop().css("backgroundPosition","-400px 0px")
.animate({backgroundPosition : '0px 0px'},2000)
}
);
});
</script>
$(function() {
$('#Navilist li a').mouseover(
function(){
$(this).stop().css("backgroundPosition","-400px 0px")
.animate({backgroundPosition : '0px 0px'},2000)
}
);
});
</script>
● topmenu方式を使っている場合
◆ ＣＳＳへ追記
/* ------------------------------------------------------- */
/* 横ナビメニュー（topmenu用) アニメーション */
/* ------------------------------------------------------- */
#topmenu li a:hover{
background-color:#ffccff;/* カーソルを乗せたときの背景色 */
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:-400px 0px;/* -400px は画像の横幅 */
color: #ffffff;/* カーソルを乗せたときの文字色 */
}
/* 横ナビメニュー（topmenu用) アニメーション */
/* ------------------------------------------------------- */
#topmenu li a:hover{
background-color:#ffccff;/* カーソルを乗せたときの背景色 */
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:-400px 0px;/* -400px は画像の横幅 */
color: #ffffff;/* カーソルを乗せたときの文字色 */
}
◆ フリープラグインへ追記
<script language="JavaScript">
$(function() {
$('#topmenu li a').mouseover(
function(){
$(this).stop().css("backgroundPosition","-400px 0px")
.animate({backgroundPosition : '0px 0px'},2000)
}
);
});
</script>
$(function() {
$('#topmenu li a').mouseover(
function(){
$(this).stop().css("backgroundPosition","-400px 0px")
.animate({backgroundPosition : '0px 0px'},2000)
}
);
});
</script>
● 説明
◆ .animate({backgroundPosition : '0px 0px'},2000) の
2000 は２秒の意味です。２秒間かけてアニメーションを
終了させます。
この2000の数値を変えれば、移動速度が変わります。
◆ $(this).stop().css("backgroundPosition","-400px 0px") の
-400pxは背景画像の横の長さです。
（画像の横幅が400px の場合は、-400px とマイナスをつけて指定します）