POPSブログ

jQuery HoverMenu/5

163

  Category:  jquery2012/10/30 pops 

jQueryメソッド hover(over,out) を使用して、メニュー要素背景をフエード等の変化させますが、メニュー要素の幅が一定ではありません。

 

jQuery HoverMenu 5

メニューのアクションはCSSによるものが多いのですが、手軽なjQuery APIのメソッド hover(over,out) をメニューに応用してみます。メニュー要素背景を変化させます。
以前のサンプルは、メニュー要素の幅が固定化されていました。今回はメニュー要素の幅が一定ではありません。


前回までのように「メニュー要素の幅が一定」のほうが簡単ですが、レイアウトの関係で、どうしても「メニュータイトル文字幅」に合わせたい事があります。CSSの都合でJSでの修正が必要です。


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


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




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


HTML JS CSS について


色々「メニューブロック」を変化させたりする「メニューの基本形」です。サンプルでは移動(フエード)させていますが、アニメにしたり画像を旨く使用すると色々な変化のあるメニューがつくれます。


HTML

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


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

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


JS

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


//hover-menu6.js
//日本語

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

		var move_type="fadex";//fade move
		var back_H=2;//menu-backクラス縦補正値
		var itemHeight=40;//高さ
		var itemMargin=20;//スペース

		//色データ
		var active_color="#777777";//背景色
		var active_txcolor="#FFFFFF";//文字色
		var colordata=["#DB7093","#F4A460","#BC8F8F","#FF69B4","#778899","#00CED1","#9370DB","#6496ED","#CCCCCC"];

		//保存配列
		var item=[];
		var item_W=[];

		$("#hover-menu ul li").each(function(i){

			item[i]=$(this);//オブジェクト保存
			//色データで背景着色
			item[i].css({'background-color':colordata[i]});

			//span absoluteで幅取得出来ないのでli 100%にした
			item_W[i]=item[i].find('span').width();

			//パデング補正スペース
			var w=item_W[i]+itemMargin;
			item[i].css({'width':w});

			//hover-action、オブジェクトで実行
			item[i].hover(
				//over
				function() {
					$(this).addClass("hovered");
					if (move_type == 'fade') {
						//fade
						$(this).find('.menu-back').fadeTo(600,0);
					} else {
						//move クラス縦補正値も考慮
						$(this).find('.menu-back').animate({'top':(itemHeight-back_H)/2,'height':0},400);
					}
				},
				//out
				function() {
					$(this).removeClass("hovered");
					if (move_type == 'fade') {
						//fade
						$(this).find('.menu-back').fadeTo(200,1);
					} else {
						//move クラス縦補正値も考慮
						$(this).find('.menu-back').animate({'top':0,'height':itemHeight-back_H},400);
					}
				}
			);
		});

		//activeの背景色、テキスト色の変更
		$("#hover-menu").find('.active').find('.menu-back').css({'background-color':active_color});
		$("#hover-menu").find('.active').find('span').css({'color':active_txcolor});

	});
})(jQuery);


JSの簡単な説明

メニューのリンク要素を幅を可変状態につくりますが、position:absoluteを使用しているためにCSSだけでは困難です。
そのために、JSで修正しています。リンクのテキスト幅が取得が困難なため、liの幅を100%に設定してspan幅を取得してpaddingを考慮して修正しています。
不用意にCSSで横幅を修正すると旨く行かない場合があります。


JS先頭部分の抜粋


		var move_type="fadex";//fade move
		var back_H=2;//menu-backクラス縦補正値
		var itemHeight=40;//高さ
		var itemMargin=20;//スペース

		//色データ
		var active_color="#777777";//背景色
		var active_txcolor="#FFFFFF";//文字色
		var colordata=["#DB7093","#F4A460","#BC8F8F","#FF69B4","#778899","#00CED1","#9370DB","#6496ED","#CCCCCC"];

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

1. move_type、fade moveの2種より選定できます。サンプルはmoveです。
2. back_H、リスト要素下部にラインがありますが、menu-backクラスの縦を短くしています。その値です。
3. itemHeight、通常のリスト要素の高さ。
4. itemMargin、メニュー要素タイトルの左右のスペース合計値。
5. 色データである、active_color、active_txcolor、colordata、を設定ください。
6. 処理させたくないJS部分は、// を先頭に記載してください。


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


CSS

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


hover-men6.css



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

#hover-menu {
position:relative;
display:block;
width:640px;
height:40px;
text-align:left;
background-color:#111111;
overflow:hidden;
}

#hover-menu ul {
list-style:none;
display:block;
width:auto;
height:40px;
padding:0;
margin:0;
}

#hover-menu ul li {
list-style:none;
display:inline;
position:relative;
top:0;left:0;
width:100%;/* 重要 */
height:40px;
padding:0;
margin:0 1px;
float:left;
overflow:hidden;
}

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

#hover-menu ul li span {
display:inline-block;
position:absolute;
top:0;left:0;
width:auto;
padding:0 10px;
height:40px;
line-height:40px;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
text-align:center;
float:left;
}

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


変更修正などを行う場合、JSは基本的には 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]