POPSブログ

jQuery HoverMenu/6

164

  Category:  jquery2012/11/01 pops 

HoverMenu1-5は、変化させるため中間層を挿入していましたが、これは普通にリスト形式で作成したメニュー要素の「li の背景画像を背景のポジション移動」(background-position) で変化させます。(IE6非対応)

 

jQuery HoverMenu 6

手軽なjQuery APIのメソッド hover(over,out) を応用しますが、メニューは一般的な作りですので要素の幅を「可変」「固定」どちらでも指定できます。但しバリエーションは少なめです。
アニメさせた場合にキレイになる背景画像の設計がキーポイントになるでしょう。


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


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

Firefox Opera は縦方向のアニメーションしません。CSSで変化させます。


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



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



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


background-position のアニメーションについて


上のサンプルは background-position「Y方向」のアニメーションを行っています。
Firefox Opera、は単独で「X方向」「Y方向」を設定するCSSが機能しないためにアニメーションを原則行えません。


1. アニメーションの機能する場合はアニメーションさせます。Firefox Opera はCSSで変化させます。
2. Firefox Operaであっても「X方向」のアニメーションをさせることは可能です。「Y方向」はできません。
3. jqueryプラグインの「jquery.backgroundPosition.js」を使用すれば「X方向」「Y方向」のアニメーションを行うことが出来ます。大変便利です。
4. このサンプルはプラグインを使用していません。次回にプラグインを使用してみます。
5. background-position アニメーションを使用すれば構造が簡単で overflow:hidden も使用がへります。
(アニメ用DIV要素の部材など埋め込んでいないので、改造などがし易くなる)


HTML JS CSS について


HTML

通常のメニューと変わりありませんが「CSSスプライト」式の変化をアニメで行う方式です。画像はメニューの大きさに合わせて作ります。

今回は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>

activeページの場合は「クラスにactive」を記載ください。名前は自由です。変更の際は、CSS、JSの該当箇所を修正ください。また他のJSなどで「activeクラス」を追加して使用も可能です。


JS

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


//hover-menu7.js
//日本語
//li背景アルファチャンネル画像方式

(function($){

	$(function(){

		//Firefox Opera判定
		var vfo=false;
		var userAgent = window.navigator.userAgent.toLowerCase();
		if (userAgent.indexOf("firefox") > -1) {vfo=true;}
		if (userAgent.indexOf("opera") > -1) {vfo=true;}

		//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");
					//アニメOpera Firefox無効
					item[i].animate({'backgroundPositionY':-menu_H},400,function (){

						//OperaFirefox対策、CSSで背景ポジション確定 注意background-position使用
						if (vfo) {item[i].css({'background-position':'0 -'+menu_H+'px'});}

					});
				},
				//out
				function() {

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

					//処理
					item[i].removeClass("hovered");
					//アニメOpera Firefox無効
					item[i].animate({'backgroundPositionY':0},400,function (){

						//OperaFirefox対策、CSSで背景ポジション確定 注意background-position使用
						if (vfo) {item[i].css({'background-position':'0 0'});}

					});
				}
			);

		});

	});
})(jQuery);

アニメのポジション位置を変えると結構雰囲気も変わります。


JSの簡単な説明

いたって普通のメニューです。JSでは、アクティブの要素の設定が多ので多少デザインなど変化させやすい。


JS先頭部分の抜粋


		//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"];


設定説明です、高さはCSSと合わせてください。

1. menu_H、メニュー要素の高さ。
2. center_set、set 自動で幅などのCSSを決める。
3. active_color、アクティブの要素の背景色。
4. active_txcolor、アクティブの要素の文字色。
5. active_bordercolor、アクティブの要素のボーダー色。
6. colordata、メニュー要素の色データ。
7. 処理させたくないJS部分は、// を先頭に記載してください。
8. 移動位置の数値、アニメ速度などは手書きで変更しても結構です。


ID名、クラス名、JS名など変更する場合は、JS、CSSの必要箇所を使用者が変更ください。


アニメ、CSS処理などでの「2つの値」の文字列の代入

ここでは、Firefox Operaでの処理だから余り問題はないが、マイナス値を文字列で作成しながらの代入は、IE6 7ではエラーになりやすいので作り方に注意



実際に記載したい文字列
item[i].css({'background-position':'0 -40px'});
-----------------------------------------------------

下記全部同じことです

変数を代入1
item[i].css({'background-position':'0 -' + menu_H + 'px'});
変数を代入2
item[i].css({'background-position':'0 ' + '-' + menu_H + 'px'});
変数を代入3
item[i].css({'background-position':'0 ' + (-1*menu_H) + 'px'});

別の変数に代入してから入れる4
var pos_string = '0 ' + '-' + menu_H + 'px';
item[i].css({'background-position':pos_string});

別の変数でマイナス化しておき代入する5、エラーになり難い
var menu_H2 = -menu_H;
item[i].css({'background-position':'0 ' + menu_H2 + 'px'});

そのほか色々方法はあるが、IE6 7が旨く認識しない、エラーになるなど多いので
--確認すること--

CSS

ここでの左揃えCSS例です。修正の必要な場合は環境に合わせて変えてください。角丸処理はCSS3ですので注意ください。


hover-menu7.css


/* hover-menu7.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;
}



li要素を固定幅にする場合など

li要素幅は現在最大 200px までです。それ以上の場合は、画像を作り直すかまたは横方向にリピートさせます。但し背景によっては旨く合致しないことがあります。縦は現在 40px です。それ以上の場合は画像を作りかえてください。


autoを指定幅にするだけ

#hover-menu ul li {
width:100px;
}


リストを中央に揃える
1. 通常の方法は、CSSを書き換えて「ul要素幅」を設定する。初期は左揃え、幅は auto です。
2. JSで自動で修正設定する。center_set を set にしてください。(クラス名など変更した場合は注意)


center_set
リストを中央に揃える

親要素centerにする
#hover-menu {
text-align:center;
}

子のul要素の幅を設定してマージン設定
JSで幅を取得するには、inline-block にすること
#hover-menu ul {
display:inline-block;
width:600px;
margin:0 auto;
}

他のCSSでも可能ですが旨くならないときも在る、上記の方法が正確だ
JSで自動で修正設定するのはもっと簡単です


li要素をCSS3で角丸処理をする。(CSS3に対応していない IE7 8 は角丸になりません)
処理する場合は、CSSを有効にしてください。処理しない場合は、コメントアウトまたは削除する。


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


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


使用画像

このサンプルでは、アルファチャンネル画像 block_alpha5b.png を使用しています

block_alpha5.png 200x80 block_alpha5b.png 200x80 使用
block_alpha6.png 200x120 block_alpha7.png 200x120

以前のものと比較しても、大きな変化はありませんので、闇雲にただ数を増やしたに過ぎません。
li要素の幅を「可変」「固定」どちらでも指定出来る利便性があるだけです。
複雑なアニメ処理を行う場合は、プラグイン「jquery.backgroundPosition.js」を使用した方が良いと思います。
次回は、プラグイン「jquery.backgroundPosition.js」を使用してみます。


面倒にアニメにしなくとも、「CSSスプライト」式で作れば、CSSだけで事足ります。背景画像のデザインが特殊だ、メニュー要素が大きい、などの場合は効果があるかも知れません。ま、お病気系の方ムキでしょうか。


jQueryによるブラウザ判定の方法は下記記事を参考にしてください。

【参考】当方の記事: jQueryによるブラウザ判定


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:series , 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]