POPSブログ

jQuery HoverMenu/8

166

  Category:  jquery2012/11/06 pops 

背景画像ポジション移動用プラグイン jquery.backgroundpos.js を使用して、リスト形式で作成したメニュー要素の「li の背景のポジション移動」させます。jQueryバージョン1-8でも使用できるのが最大の利点だ。(IE6非対応)

 

プラグイン jquery.backgroundpos.js を使用して HoverMenu を作る


jQuery HoverMenu 8

通常のjQueryアニメーション方式ですと、Firefox Opera でのY方向(上下)の移動制御が出来ません。プラグイン jquery.backgroundpos.js を使用して動作させます。前ページのjquery.backgroundPosition.jsの場合と異なり、jQuery1.8系で使用できます。
但し、通常のモダンブラウザでは何ら問題なく作動しますが、「IE7.8」には完全対応はしていないようです。まだ調べの途中ですがサンプルを表示してみます。


標準的な、li リストの中に配置の例、サンプル9


下の画像を「HOVER」ください。メニュー背景を移動変化させます。(IE6非対応)

jquery.backgroundpos.js、jquery-1.6.4.js、を使用。「IE7.8」では正常に動作しないことがあります。


1. 高さ60 CSS3角丸処理、固定幅、中央表示、(hover-menu9.js)



外側のラップ構造は使用しません。模擬的なベース背景色を表現しただけです。



サンプルとスクリプトの簡単な説明 (jquery.backgroundpos.js用)


プラグイン jquery.backgroundpos.js のアニメーションについて


Firefox Opera、は単独で「X方向」「Y方向」を設定するCSSが機能しないためにアニメーションを原則行えません。
そのために、backgroundPosition用プラグイン「jquery.backgroundpos.js」を使用してみました。
「IE7.8」を除くブラウザでは何ら問題は無い様です。「IE7.8」はそれぞれのバージョン違いで挙動がちがいます。
このサンプルでは jquery.backgroundpos.js 1.1.0、jquery-1.6.4 を使用しています。


組み合わせと動作状況

backgroundpos.v1.1.0はjquery1.8対応最新、backgroundpos.v1.0.1はjquery1.6対応旧式。

ブラウザ モダンブラウザ(IE78以外) IE78(IE6をも含む)
組み合わせ backgroundpos v1.1.0 backgroundpos v1.0.1 backgroundpos v1.1.0 backgroundpos v1.0.1
jquery1.8系 OK OK (OK)
jquery1.7系 OK OK (OK)
jquery1.6系 OK OK

△はアニメーションが完全では無い。(OK)は全てテストしていないので完全で無い場合もありえる。
「IE7.8」以外では、問題はおきていない。


背景画像を移動できることは、構造をそのままでアニメできる利点があります。他の方法ではDIV要素などを組み合わせて作りますから、HTML構造もCSSもoverflow:hiddenの関係で複雑になりやすい。これは大変便利です。


HTML JS CSS について


HTML CSSは前のページのものとほぼ同じです。JSのアニメ記述部分が jquery.backgroundpos.js の書式です。


HTML

li要素に「main-menuクラス」を設定しています。


<div id="hover-menu">
	<ul>
	<li class="main-menu active"><a href="リンクURL"><span>リンク名</span><br /><p>文字</p></a></li>
	<li class="main-menu"><a href="リンクURL"><span>リンク名</span><br /><p>文字</p></a></li>
	<li class="main-menu"><a href="リンクURL"><span>リンク名</span><br /><p>文字</p></a></li>
	<li class="main-menu"><a href="リンクURL"><span>リンク名</span><br /><p>文字</p></a></li>
	<li class="main-menu"><a href="リンクURL"><span>リンク名</span><br /><p>文字</p></a></li>
	</ul>
</div>

注意、事前にjquery.jsの読み込みのあとで、プラグイン jquery.backgroundpos.js を読み込んでおく必要があります。
JS名、ID名、クラス名、activeクラス、などを変更の場合は、JS、CSSの該当の箇所を修正の必要があります。


JS

hover-menu9.js、(簡易記述です、読み込んだら実行します)

アニメ部分の設定がjquery.backgroundpos.js用です。jquery.backgroundPosition.jsと比較して少しの違いがあるだけです。そのため問題があれば直ぐにプラグインの切り替えが出来るとおもいます。


//hover-menu9.js
//日本語
//プラグインjquery.backgroundpos.js 1.1.0を使用

(function($){

	$(function(){

		//menuの高さ
		var menu_H=60;

		//中央揃えの幅を取得して自動で幅などのCSSを決める
		var center_set="";//set none

		//色データ
		var active_color="#333333";
		var active_txcolor="#FFFFFF";
		var active_bordercolor="#FFFFFF";

		var colordata=["#DB7093","#F4A460","#BC8F8F","#FF69B4","#778899","#00CED1","#9370DB","#6496ED","#CCCCCC"];

		var item=[];
		var menu_base=$("#hover-menu");

		//ul要素の幅を決定して設定を実行する
		if (center_set=='set') {
			var ul_W=menu_base.children("ul").width();
			menu_base.children("ul").css({'float':'none'});//追加
			menu_base.css({'text-align':'center'});
			menu_base.children("ul").css({'width':ul_W,'margin':'0 auto'});
		}

		//色データで背景着色など
		$(".main-menu").each(function(i){

			item[i]=$(this);
			//着色
			item[i].css({'background-color':colordata[i]});

			//activeの処理
			if (item[i].hasClass('active')) {

				//active 背景着色
				//item[i].css({'background-color':active_color});

				//active 背景ポジションをかえる、注意background-position使用
				item[i].css({'background-position':'0 -30px'});
				//backgroundPosition使用 どちらも問題ない
				//item[i].css({'backgroundPosition':'0 -30px'});

				//active 文字の色を変える
				item[i].find('span').css({'color':active_txcolor});

				//active ボーダーを設定
				item[i].css({'height':menu_H-2,'border-top':'2px ' + active_bordercolor + ' solid'});

			}

			//hover-action
			item[i].hover(
				//over
				function() {

					//active何もしないで戻る
					if (item[i].hasClass('active')) {return}

					//処理
					item[i].addClass("hovered");

					//プラグインアニメ実行
					item[i].animate({backgroundPosition:'0px -60px'},400,function (){
						//
					});
				},
				//out
				function() {

					//active何もしないで戻る
					if (item[i].hasClass('active')) {return}

					//処理
					item[i].removeClass("hovered");

					//プラグインアニメ実行
					item[i].animate({backgroundPosition:'0px 0px'},400,function (){
						//
					});
				}
			);

		});

	});
})(jQuery);


● メニューを中央配置にする。

JS上部の設定を set にして下さい。「IE67」を除き中央にセットされます。
「IE67」をも「中央配置」にしたい場合は、下の「JSでの自動で中央揃えにする設定の補正と追加説明」を参照ください。


center_set="";//set none


JSの簡単な説明


HTML CSS またJSの変更などは、Query HoverMenu 6 のものとほぼ同じですから、そちらも参照ください。。

【参考】当方の記事: Query HoverMenu 6


jquery.backgroundpos.js

【参考とダウンロード】keith-wood.name: jQuery Background Position

JSのダウンロード及び、JSの詳細、動作サンプル、設定方法などは、上記サイトを参照ください。


● プラグイン jquery.backgroundpos.js 配布元記載の書式
配布元にサンプルはあるが、実際使用してみると「IE7.8」で完全動作しない。対応するブラウザの記載も無い!。
推測するに、「IE7.8」は念頭にないのであろう。



配布元の資料より抜粋

Quick Reference
Below are examples of how the plugin can be used.
For more detail see the documentation reference page.

$(selector).animate({backgroundPosition: '-100px -50px'});
$(selector).animate({'background-position': '+=50% +=25%'});
$(selector).animate({backgroundPosition: 'left center'});

------------------------------------------------------

Version Date Changes 
1.1.0 03 Nov 2012 ※Updated for jQuery 1.8
 
1.0.1 28 May 2011 ※Updated for jQuery 1.6
※Allow explicit positive values for positioning
※Default to center if no current position
 
1.0.0 13 Nov 2010 ※Initial release


● 実際の書式


基本的には
$("アニメ対象要素").animate({backgroundPosition:'0px -40px'}, ................

これでも動作する
$("アニメ対象要素").animate({'background-position':'0px -40px'}, ................

「IE7.8」には対応しないで、プラグイン backgroundpos は最新バージョンである v1.1.0 を使用したほうが無難である。


● プラグイン backgroundpos.js と backgroundPosition.js 書式の違い。


アニメーションの部分の書き方

backgroundPosition.jsは()が在る
{backgroundPosition:'(0px -40px)'}

backgroundpos.jsは()が無い
{backgroundPosition:'0px -40px'}

ほとんど同じですから、切り替えなど楽とおもいます

詳細はダウンロード先の資料を参照ください。


CSS

hover-menu9.css

li要素の幅は「可変」「固定」にすることが可能です。中央配置はJSで行ったほうが便利です。


#hover-menu {
display:block;
width:640px;
height:60px;
background-color:#000000;
/*overflow:hidden;*/
}

/*幅を取得のためinline-blockにしている*/
#hover-menu ul {
list-style:none;
display:inline-block;
width:auto;
height:60px;
padding:0;
margin:0;
}
#hover-menu ul li {
list-style:none;
display:inline-block;
width:100px;/*auto xxpx*/
height:60px;
padding:0;
margin:0 1px;
text-align:center;
background:url('/main/images/block_alpha8.png') no-repeat;
background-color:#EEEEEE;
background-position:0 0;
float:left;
overflow:hidden;
}


#hover-menu .main-menu {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#hover-menu ul li a {
text-decoration:none;
margin:0
padding:0;
}

#hover-menu ul li span {
width:auto;
height:60px;
padding:0 10px;
line-height:40px;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
cursor:pointer;/*default*/
}
#hover-menu ul li p {
margin-top:-10px;
line-height:12px;
font-size:10px;
color:#CCCCCC;
cursor:pointer;/*default*/
}

/* hovered */
#hover-menu ul li.hovered span {
color:#FFFFFF;
}


● li要素の幅を「可変」にする場合。サンプルでは「固定」です。


#hover-menu ul li {
width:auto;
}

jQuery HoverMenu 7 のサンプルを jquery.backgroundpos.js で動かす

jquery.backgroundpos.js を読み込む、アニメ設定の書式の()を削除してbackgroundpos 用に書き換える。
それだけで、動作します。backgroundpos 移行も簡単です。


JSでの自動で中央揃えにする設定の補正と追加説明 (IE6 7対象)


JSでの自動で「中央揃え」にする設定についての補足です。そのままでは「IE6 7」で機能しませんので追加の説明をします。IE8以上、その外は修正なしでOKです。
CSS 記述で「IE6 7」の場合、幅の値が取得できないので「フロート」をいれる修正をします。
但し、余りメインメニューを「中央揃え」にすることはないとはおもいますが、、、


JS側の修正


IE6 7のためにフロートしているのでフロートを解除するを追加
フロートを解除しないと中央には行かない
menu_base.children("ul").css({'float':'none'});


スクリプトは次ぎのようになる

//ul要素の幅を決定して設定を実行する
if (center_set=='set') {
	var ul_W=menu_base.children("ul").width();
	menu_base.children("ul").css({'float':'none'});//追加
	menu_base.css({'text-align':'center'});
	menu_base.children("ul").css({'width':ul_W,'margin':'0 auto'});
}

メソッドチェーンにはしないでください(効率的に書くと機能しない場合あり)

フロートを解除はフロートしていない場合も影響は無い
float:leftをJSで設定してその後解除させるには、かなりの時間間隔がないと
正常処理されないのでCSSで先に設定したほうが良い


CSS側の修正


ul要素を、ハックでIE6 7のためにフロートする
IE6 7は inline-block auto でもフロートさせないと、ul要素はのびる

JSで幅を取得するための標準的な記述
#hover-menu ul {
list-style:none;
display:inline-block;
width:auto;
/float:left;
}

要約すれば、フロートしてその後フロート解除する作業です。
以上補足の説明でした、「IE6 7」対象外の場合は関係ありません。


使用背景画像

アルファチャンネル画像(PNG32) block_alpha8.png 200x120


最後に

繁雑さを考えると、「IE7.8」は除外したほうが良い。スクリプトが簡単に書ける。

考えるに「IE7.8」に対応する事自体がおかしいのかも知れない。世の中ではもう「IE7.8」なんて念頭に無い。
また背景をアニメで動かすことは余りないので、jquery.backgroundpos.js に関する記事は少ないです。もう少し調べて後日、記事にしてみます。


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , memo , series

[ jQuery HoverMenu シリーズ記事 ]

jQuery HoverMenu/112012.11.18
jQuery HoverMenu/102012.11.14
jQuery HoverMenu/92012.11.08
jQuery HoverMenu/82012.11.06
jQuery HoverMenu/72012.11.04
jQuery HoverMenu/62012.11.01
jQuery HoverMenu/52012.10.30
jQuery HoverMenu/42012.10.29
jQuery HoverMenu/32012.10.28
jQuery HoverMenu/22012.10.27
jQuery HoverMenu/12012.10.26

 

ブログ記事一覧

年別アーカイブ一覧



[1]