POPSブログ

jQuery HoverMenu/9

167

  Category:  jquery2012/11/08 pops 

前ページ掲載の jquery.backgroundpos.js 使用の、HoverMenu 8 のサンプルに「サブメニュー」を加えた構造にして「サブメニュー」を伸縮表示します。(IE6非対応)

 

jQuery HoverMenu 9

「サブメニュー」を加えただけで、基本的にはほぼ同じになります(タイトル部分を「h3要素」に変更)。違いはサンプルを操作してください。


標準的な、li リストの中に配置の例 (サブメニュー付き)、サンプル10


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

jquery.backgroundpos.js v1.1.0、jquery-1.6.4.js、を使用。

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



このサンプルでは jquery が 1.6系で動作しているため「IE7.8」では正常に動作しないことがあります。(一見して何処が正常で無いかは判断し難いと思いますが、、、)
外側のラップ構造は使用しません。模擬的なベース背景色を表現しただけです。



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


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


サンプルのようなものを作るときは「背景画像を移動できる」は大きな利点です。「DIV要素」で加工するより構造も、CSSも少し簡単になります。但しjqueryバージョンにより、jquery.backgroundpos.jsバージョンの組み合わせの問題などがあるので、その点考慮しなければならない。(前ページ参照)


HTML JS CSS について


HTML CSSは前のページのもの若干の違いがあります。タイトル部分を「h3要素」に変更して「サブメニュー」構造を加えてあります。


HTML

li要素に「main-menuクラス」入れ子のul要素に「sub-menuクラス」を設定しています。構造は同じにしてください。


<div id="hover-menu">
	<ul>
	<li class="main-menu active">
		<a href="リンクURL"><h3>メインリンク名</h3><br /><p>文字</p></a>
	</li>
	<li class="main-menu">
		<a href="リンクURL"><h3>メインリンク名</h3><br /><p>文字</p></a>
		<ul class="sub-menu">
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		</ul>
	</li>
	<li class="main-menu">
		<a href="リンクURL"><h3>メインリンク名</h3><br /><p>文字</p></a>
		<ul class="sub-menu">
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		<li><a href="リンクURL">サブリンク</a></li>
		</ul>
	</li>
	<li class="main-menu">
		<a href="リンクURL"><h3>メインリンク名</h3><br /><p>文字</p></a>
	</li>
	<li class="main-menu">
		<a href="リンクURL"><h3>メインリンク名</h3><br /><p>文字</p></a>
	</li>
	</ul>
</div>

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


JS (上のサンプルの動作と同じもの、IE6では一応動作しますが、キレイではありません)

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

アニメ部分の設定が jquery.backgroundpos.js 用です。


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

(function($){

	$(function(){

		//menuの高さ
		var menu_H=60;

		//中央揃えの幅を取得して自動で幅などのCSSを決める
		var center_set="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.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]});

			//この構造ではsub-menu着色はliを染めたほうが良い
			//色を染めるとリンクの文字が見えなくなるので注意
			//item[i].find('.sub-menu li').css({'background-color':colordata[i]});

			//sub-menuのある場所に▼を挿入する
			if (item[i].find('ul').hasClass('sub-menu')) {
				var ti_elm=item[i].find('h3');
				ti_elm.text(ti_elm.text() + ' ▼');
			}

			//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('h3').css({'color':active_txcolor});

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

			}

			//sub-menuクラスをabsoluteの形にした
			//DIVでないので高さは取得できる
			subitem_H[i]=item[i].find('.sub-menu').height();
			item[i].find('.sub-menu').css({'height':0,'display':'none'});

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

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

					//残っている場合があるので全てけす/別に処理しなくとも使用は出来る
					$('.sub-menu').css({'display':'none'});

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

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

						//sub-menu
						//inline-blockでも同じようだ
						item[i].find('.sub-menu').css({'display':'block'});
						item[i].find('.sub-menu').animate({'height':subitem_H[i]},400,function (){
							//
						});

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

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

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

					//sub-menuがあれば
					if (subitem_H[i]) {
						//sub-menu
						item[i].find('.sub-menu').animate({'height':0},400,function (){

							//sub-menu消す
							item[i].find('.sub-menu').css({'display':'none'});

							//アイテム高さを戻す
							item[i].animate({'height':60},200,function (){

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

						});
					} else {
						//sub-menuが無ければ
						//プラグインアニメ実行
						item[i].animate({backgroundPosition:'0px 0px'},400,function (){
							//
						});

					}

				}
			);

		});

	});
})(jQuery);

JS中の説明など削除する、インデントなども少なくすれば、若干早くなります。


使用jqueryバージョンなどの注意点

動作の関係で、jquery バージョン 1.7 1.8系を、プラグイン jquery.backgroundpos.js バージョン v1.1.0、の組み合わせを推奨します。組み合わせを違わせますと「IE7 8」で正常な動作をしません。
プラグインの組み合わせ詳細は、前のページを参照ください。

【参考】当方の記事: jQuery HoverMenu 8


JSの簡単な説明

従来どおり「main-menuクラス」は背景画像を「プラグイン」でアニメ、「sub-menuクラス」の高さを通常のアニメ処理しているだけです。背景画像の動きに合わせて、out処理での順序を変更しています。
初期設定などはJS上部を読んでください。


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

この記載のJSは当初から「IE6.7」「中央配置」になっています。

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


center_set="";//set none


● 追加の設定
1. sub-menuの内部を登録色データで染める: リンクの文字が見えなくなるので、余りお勧めしない
2. sub-menuのある場所に▼を挿入する: sub-menuのある場合です、使用しない場合は機能しないようにするか、削除する。簡単に「サブメニュー」があることを明示できます。
3. 乱暴なマウス操作の場合の是正: 乱暴なマウス操作をするとサブメニュー部分がマレに残る場合があります。それを非表示に修正します。設定有り、無しで少々動作が違います。



	//この構造ではsub-menu着色はliを染めたほうが良い
	//色を染めるとリンクの文字が見えなくなるので注意
	//item[i].find('.sub-menu li').css({'background-color':colordata[i]});
---------------------------------------------

	//sub-menuのある場所に▼を挿入する
	if (item[i].find('ul').hasClass('sub-menu')) {
		var ti_elm=item[i].find('h3');
		ti_elm.text(ti_elm.text() + ' ▼');
	}
---------------------------------------------

	//over
	function() {

		//残っている場合があるので全てけす/別に処理しなくとも使用は出来る
		//$('.sub-menu').css({'display':'none'});

	}

active時のJSの修正


標準では active 時のli要素にHOVERしても何もしないで戻るようになっています。そのために「サブメニュー」が開きません。主リンクは機能しますので「サブメニュー」のトップページに行くことが可能です。


●「サブメニュー」を表示させる場合の訂正 (2012/11/09)



JSの修正1

active 背景ポジションをかえるを全て機能しないようにしてください

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

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

JSの修正2
over out 処理の下の部分を機能しないようにしてください

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

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

ボーダーを設定は有効にしてください
//active ボーダーを設定
	item[i].css({'height':menu_H-2,'border-top':'2px ' + active_bordercolor + ' solid'});

後日、少し修正したJSに取り替えるかも知れません。


CSS

IE7でも「中央配置」の設定になっています。「中央配置」にしない場合は下記の「JSでの自動で中央揃えにする設定の補正と追加説明」を参照ください。

hover-menu10.css

li要素の幅は「サブメニュー」が有りますので「固定」にするが原則です。中央配置はJSで行ったほうが便利です。


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

#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;
/float:left;
}
#hover-menu ul li {
list-style:none;
position:relative;
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 h3 {
width:auto;
height:20px;
margin-top:10px;
padding:0 10px;
line-height:20px;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
cursor:pointer;/*default*/
}
#hover-menu ul li p {
margin-top:-20px;
line-height:12px;
font-size:10px;
color:#CCCCCC;
cursor:pointer;/*default*/
}

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

/* sub-menu */
/* 幅を広げる可能 問題が少ないabsolute */
#hover-menu .sub-menu {
position:absolute;
top:50px;left:0;
display:inline-block;
width:100px;
height:auto;
padding:0;
margin:0;
background-color:#FFFFFF;
}

#hover-menu .sub-menu li {
list-style:none;
display:inline;
width:96px;
height:20px;
padding:2px;
_padding:2px 1px;
margin:0;
line-height:16px;
font-size:11px;
text-align:left;
background-color:#FFFFFF;
background-image:none;
overflow:hidden;/*IE6*/
}
#hover-menu .sub-menu li a {
text-decoration:underline;
height:20px;/*IE6*/
}

IE6にはJSは対応しませんが、モシ閲覧された場合にメインメニューを一応表示だけするようCSSを記述しました。
高さ変更の場合は、CSSの該当の部分及び、JSのアニメ部分の 60の数値部分などの変更が必要になります。


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


IE9以上、及びIE以外のブラウザに限定すれば簡単にもなります。背景移動はCSSだけで出来ますから、私の場合は勿論CSSでします。
一応、JSを使う前提のサンプルでした。エライ面倒ですね!。


簡単ですが、以上です。

 


[ この記事の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]