POPSブログ

jQuery HoverMenu/1

159

  Category:  jquery2012/10/26 pops 

前回までは、jQueryメソッド hover(over,out) を使用して画像を変化させるものでした。今回はメニューに応用してみます。メニュー要素背景をフエード変化させます。

 

jQuery HoverMenu 1

メニューのアクションはCSSによるものが多いのですが、手軽なjQuery APIのメソッド hover(over,out) をメニューに応用してみます。メニュー要素背景をフエード変化させます。
(前回のものにもリンクを貼ってありますから、並べて文字を挿入すればメニューにはなりますが、、)


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


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




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


HTML JS CSS について


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


HTML

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


<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>
	</ul>
</div>

<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-menu.js、(簡易記述です、読み込んだら実行します)


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

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

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

		//色データで背景着色
		$("#hover-menu ul li").each(function(i){
			$(this).css({'background-color':colordata[i]});
		});

		//active
		$("#hover-menu").find('.active').find('.menu-back').css({'background-color':active_color});

		//hover-action
		$('#hover-menu ul li').hover(
			//over
			function() {
				$(this).addClass("hovered");
				$(this).find('.menu-back').fadeTo('slow',0);
			},
			//out
			function() {
				$(this).removeClass("hovered");
				$(this).find('.menu-back').fadeTo('fast',1);
			}
		);
	});
})(jQuery);


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

ID名、#hover-menu2 が違うだけで、1番と全て同じです。


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

(function($){
	//H80
	$(function(){

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

		//色データで背景着色
		$("#hover-menu2 ul li").each(function(i){
			$(this).css({'background-color':colordata[i]});
		});

		//active
		$("#hover-menu2").find('.active').find('.menu-back').css({'background-color':active_color});

		//hover-action
		$('#hover-menu2 ul li').hover(
			//over
			function(e) {
				$(this).addClass("hovered");
				$(this).find('.menu-back').fadeTo('slow',0);
			},
			//out
			function() {
				$(this).removeClass("hovered");
				$(this).find('.menu-back').fadeTo('fast',1);
			}
		);
	});
})(jQuery);


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


JSの変更など。

色データの登録色は任意です。色によっては「文字」が読み難くなりますので旨く選定ください。


HOVERの場合hoveredクラスを与えています、追加のCSSがあればCSSに追加する
$(this).addClass("hovered");

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

activeクラスの処理はJSで行っています
$("#hover-menu").find('.active').find('.menu-back').css({'background-color':active_color});
使用しない場合は
//$("#hover-menu").find('.active').find('.menu-back').css({'background-color':active_color});
として機能しないようにしてください

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

//色データで、menu-backクラス背景着色する場合
$("#hover-menu ul li").each(function(i){
	$(this).find('.menu-back').css({'background-color':colordata[i]});
});


CSS

ここでのCSS例です、環境に合わせて変えてください。
ここでは「ul要素」の幅を与えて中央揃えにしています。別にリストを中央揃えする方法はありますが旨く行かないようです。


hover-menu.css



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

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

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

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

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

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


hover-menu2.css


/* menu 2 */
#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;
}


リスト中央揃えの解除

text-align:center、margin:0 auto、で処理していますので、下記のように修正すれば左揃えになります。


#hover-menu {
text-align:left;
}
#hover-menu ul {
width:auto;
/*margin:0 auto;*/
}
widthに数値を計算して入れても良い


本来の背景の着色方法など、

面倒なので、JSで行っています。JS上部参照。


サンプルでボーダーは使用していません、下部の線の色はli要素の背景です
#hover-menu ul li .menu-back {
height:38px;
}
menu-backクラスの高さ調整で表現しています
親li要素の高さ(40px)にすれば線はきえます

----------------------------------------------
中の文字の配置はline-heightで調整できます
#hover-menu ul li span {
line-height:40px;
}

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

本来の背景の着色方法、大変だ
<ul>
	<li id="mnblock1"></li>
	<li id="mnblock2"></li>
	<li id="mnblock3"></li>
	<li id="mnblock4"></li>
</ul>

#hover-menu #mnblock1 {
background-color:#FF0000;
}
#hover-menu #mnblock2 {
background-color:#FF00FF;
}
#hover-menu #mnblock3 {
background-color:#FFFF00;
}
#hover-menu #mnblock4 {
background-color:#00FF00;
}


JSで背景色を決めているのが理由かはわかりませんが、「CSSの変更修正」の際、少々CSS記述で要素の認識が良くないようです。変更の際には反映されることを確認ください。


簡単ですが、以上です。

 


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