POPSブログ

jQuery HoverMenu/7

165

  Category:  jquery2012/11/04 pops 

背景画像ポジション移動用プラグイン jquery.backgroundPosition.js を使用して、リスト形式で作成したメニュー要素の「li の背景のポジション移動」させます。但し使用するjQueryバージョン違いでは、IEで動作しないようです。少し改造を試みてみました。(IE6非対応)

 

jQuery HoverMenu 7

通常のjQueryアニメーション方式ですと、Firefox Opera でのY方向(上下)の移動制御が出来ません。プラグイン jquery.backgroundPosition.js を使用して動作させます。但し少々問題があります。
jQuery1.5系からjQuery1.7系を使用した場合に「IE6 7 8」で動作しません。そこで、、、


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


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

jquery.backgroundPosition.js を使用。Firefox Opera でも動作します。


1. 高さ40 CSS3角丸処理、(hover-menu8.js)



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



サンプルとスクリプトの簡単な説明


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


Firefox Opera、は単独で「X方向」「Y方向」を設定するCSSが機能しないためにアニメーションを原則行えません。
そのために、backgroundPosition用プラグイン「jquery.backgroundPosition.js」を使用してみました。


jquery.backgroundPosition.js 標準動作表 (対象、jquery-1.4.2 / 1.5 / 1.6.2 / 1.6.4 / 1.7.2 / 1.8.2 )

項目 jquery 1.4系 jquery 1.5系 jquery 1.6系 jquery 1.7系 jquery 1.8系
IE6.7.8 OK undefined undefined undefined 動作不能
IE9 OK OK OK OK 動作不能
Chrome OK OK OK OK 動作不能
Safari OK OK OK OK 動作不能
Firefox OK OK OK OK 動作不能
Opera OK OK OK OK 動作不能
--- - - - - -

jquery.backgroundPosition.jsの動作サンプルはjquery1.3系のものしか在りません。CSSを読み取れないエラーのようですので、工夫して動作可能です。jquery1.8系は対応できません。バージョンアップも無い様です。


1. jQuery1.5系からjQuery1.7系を使用した場合に「IE6 7 8」で動作しません。その外の IE9 Firefox Opera Chrome Safariでは問題ありません。上記の表のようになります。
そこで、少々「jquery.backgroundPosition.js」を書き換えることにより「IE6 7 8」で動作するようにしました。
2. 但し、jQuery1.8系以上では「jquery.backgroundPosition.js」そのものが機能しません。API $.curCSS()が削除されたことに起因します。jQuery1.7系まで対応出来る事に成ります
3. プラグイン jquery.backgroundpos.js を使用すれば全てで問題ありません。(次ぎのページで使用してみます)

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


HTML JS CSS について


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


HTML

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


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

注意、事前にjquery.jsの読み込みのあとで、プラグインjquery.backgroundPosition.jsを読み込んでおく必要があります。


JS

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


//hover-menu8.js
//日本語
//改造プラグインbackgroundPosition.jsを使用

(function($){

	$(function(){

		//menuの高さ
		var menu_H=40;

		//中央揃えの幅を取得して自動で幅などの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 subitem_H=[];
		var menu_base=$("#hover-menu");

		//ul要素の幅を決定して設定を実行する
		if (center_set=='set') {
			var ul_W=menu_base.children("ul").width();
			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]});

			//sub-menu着色/文字色に注意
			item[i].find('.sub-menu').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 -20px'});
				//backgroundPosition使用 どちらも問題ない
				//item[i].css({'backgroundPosition':'0 -20px'});

				//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 -40px)'},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の簡単な説明


HTML CSS またJSの変更などは、前ページのものとほぼ同じですから、そちらを参照ください。。

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


backgroundPosition.js

CSS-Tricksの記事、Garage Door Style Menu /October 25, 2010

【参考とダウンロード】css-tricks.com: Garage Door Style Menu

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


プラグイン backgroundPosition 書式


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


backgroundPosition.jsの修正変更

jquery.backgroundPosition.jsの変更についてです。エラーの起きるバージョンでも、「IE6 7 8」で動作するように、スクリプトに追加修正を行いました。但しjQuery1.8系及び以上では使用しないでください。


/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
               //IE
               if (!start) {
                  var start_ie_x = $.curCSS(fx.elem,'backgroundPositionX');
                  var start_ie_y = $.curCSS(fx.elem,'backgroundPositionY');
                  start= start_ie_x + ' ' + start_ie_y;
                }
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
            
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);


下記スクリプトを上方に追加しただけです。

backgroundPosition でCSSの値を取得出来ないようで、backgroundPositionX Yで取得するように処理を追加。


                //IE
                if (!start) {
                    var start_ie_x = $.curCSS(fx.elem,'backgroundPositionX');
                    var start_ie_y = $.curCSS(fx.elem,'backgroundPositionY');
                    start= start_ie_x + ' ' + start_ie_y;
                }

使用変数は任意です

当方が勝手に追加修正したものです。使用に関しては使用者の責任でお願いします。
追加部分を削除すれば、正規のJSです。


CSS

hover-menu8.css (記述内容は、前ページのものと同じです。)


/* hover-menu8.css 日本語 */

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

/*幅を取得のためinline-blockにしている*/
#hover-menu ul {
list-style:none;
display:inline-block;
width:auto;
height:40px;
padding:0;
margin:0;
}
#hover-menu ul li {
list-style:none;
display:inline;
width:auto;/*auto xxpx*/
height:40px;
padding:0;
margin:0 1px;
text-align:center;
background:url('/main/images/block_alpha5b.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 span {
width:100%;
padding:0 10px;
height:40px;
line-height:40px;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
cursor:pointer;/*default*/
}

#hover-menu ul li a {
display:inline-block;
text-decoration:none;
width:100%;/*100% auto*/
_width:auto;/*IE*/
height:40px;
}

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


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」対象外の場合は関係ありません。


参考サンプル、Using jQuery for Background Image Animations | 設置サンプル

【参考】phpjavascriptroom.com: Using jQuery for Background Image Animations

次回は、プラグイン「jquery.backgroundpos.js」を使用してみます。


無い頭を絞って、一番搾りで出来ず、三番搾りで「デガラシ風」に仕上がりました。
簡単ですが、以上です。

 


[ この記事のURL ]


タグ:series , memo , Effect , jquery

[ 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]