POPSブログ

jQuery HoverMenu/4

162

  Category:  jquery2012/10/29 pops 

jQueryメソッド hover(over,out) を使用して、メニュー要素背景を「背景画像」で変化させます。(IE6非対応)

 

jQuery HoverMenu 4

メニューのアクションはCSSによるものが多いのですが、手軽なjQuery APIのメソッド hover(over,out) をメニューに応用してみます。メニュー要素背景を「アルファチャンネル背景画像」で変化させます。


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


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




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


HTML JS CSS について


HTML

通常のメニューと変わりありませんが、下記のような構造になります。中に背景である「menu-backクラス」が挿入されます。


<div id="hover-menu2">
	<ul>
	<li class="active"><a href="リンクURL"><div class="menu-back"></div><span>リンク名<br /><p>テキスト</p></span></a></li>
	<li><a href="リンクURL"><div class="menu-back"></div><span>リンク名<br /><p>テキスト</p></span></a></li>
	<li><a href="リンクURL"><div class="menu-back"></div><span>リンク名<br /><p>テキスト</p></span></a></li>
	<li><a href="リンクURL"><div class="menu-back"></div><span>リンク名<br /><p>テキスト</p></span></a></li>
	</ul>
</div>


JS

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


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

(function($){
	//H40
	$(function(){

		//色データ
		var active_color="#555555";
		var colordata=["#DB7093","#F4A460","#BC8F8F","#FF69B4","#778899","#00CED1","#9370DB","#6496ED","#CCCCCC"];

		//menu-backクラス縦補正値
		var back_H=2;

		//色データで背景着色
		//要素の中のmenu-backクラス縦幅取得CSSが設定されていること、こちらで処理
		$("#hover-menu2 ul li").each(function(i){
			$(this).css({'background-color':colordata[i]});
			$(this).find('.menu-back').css({'top':-back_H-160});
		});

		//active
		//$("#hover-menu2").find('.active').find('.menu-back').css({'background-color':active_color});
		//文字の色を変える
		$("#hover-menu2").find('.active').find('span').css({'color':'#FFFFFF'});
		//背景色をかえ画像削除
		$("#hover-menu2").find('.active').find('.menu-back').css({'background':active_color + ' url()'});

		//hover-action
		$('#hover-menu2 ul li').hover(
			//over
			function() {
				$(this).addClass("hovered");
				$(this).find('.menu-back').animate({'top':0},800,function (){
					//
				});
			},
			//out
			function() {

				//要素の縦幅取得、未使用、高さが同じの場合使用できる
				//var h=$(this).height();

				$(this).removeClass("hovered");
				//back_Hで処理
				$(this).find('.menu-back').animate({'top':-back_H-160},400,function (){
					//
				});

			}
		);
	});
})(jQuery);

1. メニュー要素背景を「アルファチャンネル背景画像」を使用しました。200x240
2. そのため、メニュー高さ 80px、メニュー要素幅 200px の制約があります。
3. active要素では背景画像を削除しています。JSで active_color を使用して変化をつけてください。
4. menu-backクラスの高さは、メニュー高さの3倍にして上下に移動させています。


モシ改造などで、アニメ高さが取得出来ない場合は、直接数値をいれればよい。
ID名、JS名など変更する場合は、JS、CSSの必要箇所を使用者が変更ください。


CSS

ここでのCSS例です、環境に合わせて変えてください。
ここでは「ul要素」の幅を与えて中央揃えにしています。


hover-menu5.css



/* menu 5 */
#hover-menu2 {
display:block;
width:640px;
height:80px;
text-align:center;
background-color:#111111;
overflow:hidden;
}

#hover-menu2 ul {
list-style:none;
display:block;
width:600px;
height:80px;
margin:0 auto;
}

#hover-menu2 ul li {
position:relative;
list-style:none;
display:inline;
width:150px;
height:80px;
padding:0;
margin:0;
float:left;
overflow:hidden;
}

#hover-menu2 ul li .menu-back {
display:block;
position:absolute;
top:0;left:0;
width:150px;
height:78px;
margin:0;
padding:0;
background-color:#000000;
float:left;
}

#hover-menu2 ul li span {
display:block;
position:absolute;
top:0;left:0;
width:150px;
height:80pxpx;
line-height:50px;
font-size:12px; 
font-weight:bold;
color:#888888;
text-align:center;
float:left;
}
#hover-menu2 ul li span p {
font-size:10px; 
font-weight:normal;
color:#CCCCCC;
}

#hover-menu2 ul li a {
text-decoration:none;
}
/* hovered */
#hover-menu2 ul li.hovered span {
color:#FFFFFF;
}



menu-backクラスをbottomにすれば反対方向になります
#hover-menu ul li .menu-back {
position:absolute;
bottom:0;left:0;
}

背景画像ではなく、IMG要素に画像を挿入する

画像を伸縮できますので、メニューの大きさが自由にできます。JSの上方で画像を挿入すると簡単。


画像挿入
$("#hover-menu2 ul li").each(function(i){
	$(this).css({'background-color':colordata[i]});
	$(this).find('.menu-back').css({'top':-back_H-高さの3倍の値});
	$(this).find('.menu-back').html('<img src="画像URL" width="100%" height="100%" />');
});

--------------------------------------------------------------------
JSアニメ修正
//back_Hで処理
$(this).find('.menu-back').animate({'top':-back_H-高さの2倍の値},400,function (){
	//
});

CSSは全ての高さを変更して、背景画像埋め込み部分は削除する。


使用画像

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

block_alpha2.png 200x240 使用 block_alpha.png 200x240 -----
-----

block_alpha3.png 200x240 block_alpha4.png 200x240 -----
-----

変更修正などを行う場合、JS、CSSともに基本的には HoverMenu1 と同じですので、そちらの記事を参考ください。

【参考】当方の記事: jQuery HoverMenu1



簡単ですが、以上です。

 


[ この記事のURL ]


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