スライドで見え隠れするエフェクトのついた二つのCSS縦メニュー

2008/04/02

カテゴリ：: JavaScript

タグ：: javascript; CSS; 縦メニュー; jquery; mootools

Two CSS vertical menu with show/hide effects

上記のサイトにて、縦並びになっているメニューが
JavaScriptとMootoolsを使って紹介されていたのですが、
サンプルのプレビューの画像が切れて表示されていたり、
横幅を画像と同じにしたいと思ったので、ソースを少しいじってみました。

そして、僕はMootoolsとjQueryの二つの方法で、
Web2.0風の縦メニューのshow/hideエフェクトをつけたので、
比較してみようと思います。

CSS

いきなりですが、変更後のCSSを書いておきます。

body{font-family:Arial, Helvetica, sans-serif; font-size:13px;}
/* ----------------------------------- */
/* BUTTON */
.button{
	color:#FFFFFF;
	clear:both;
	display:block;
	font-size:13px;
	font-weight:bold;
	height:25px;
	width:198px;	
}
	a.button {
		text-decoration:none;
	}
	.button span {
		background:url(https://h2ham.up.seesaa.net/image/button.png) left top no-repeat;
		display:block;
		height:31px;
		line-height:31px;
		padding-left:10px;
	}
/* ----------------------------------- */
/* MENU	*/
.v-menu{
	border:solid 1px #7F9FBF;
	width:198px;
}
	ul.v-menu, .v-menu li{
		display:block;
		float:left;
		clear:left;
		padding:0; 
		margin:0;
		list-style:none;
	}
	ul.v-menu{
		clear:both;
		padding:6px 10px;
		width:176px;
	}
		.v-menu li a{
			color:#555555;
			font-weight:bold;
			display:block;
			border-top:solid 1px #DEDEDE;
			padding:4px 0;
			text-decoration:none;
		}
		.v-menu li a:hover{
		color:#999999;
		}

このCSS設定だと、クリックした後の画像を変更しません。
作っている最中に忘れていたのですが、ご了承ください。

主な変更(修正)点

主な変更点としては、スライドして出てくる部分のサイズを固定しました。
ずれていても良かったのですが、同じにしたかったのです。

それと、背景に入れられていた画像も見えるようにしました。
widthを指定したくらいですけどね。
(この段階でクリック後の画像を消してしまったので、
背景画像の指定は消さない方がいいかもしれません。)

そして、スライドして出てくる部分がきちんと画像の下と
くっつくように少し高さを調節しました。
IEだとmargin-topが有効になってしまっていたので、 margin-topも削除しました。

リストの高さもそれぞれ同じにしようと思ったので、
floatとclearを指定しpaddingで同じ高さになるようにしました。
この二つを指定していないと、なぜか余白が多くとられてしまい、
表示がブラウザで同じにならなかったので、指定しました。

これで一応、同じサイズになっていると思います。

この指定で、横のサイズはボタンもスライドもあわせられます！
そしてボタンとスライドしてくるリストの境界も
くっつくようになっていると思います。

なにかバグがあればご報告お願いします。

jQueryとMootools

僕が主に利用しているのはjQueryなんですが、
プレビューにあったMootoolsも少しさわってみました。

ちょっとしかいじっていないので、なんとも言えないのですが、
ちょっとなれないと使いづらいのかもしれません。
ですが、MootoolsにはMootoolsのいい部分もあるようなので
用途によって使い分けるといいと思います。

jQueryで作ったときのソース

Mootoolsのソースはすでに出ているので省略します。

<a href="#" class="button" id="toggle">
	<span>Click Here</span>
</a>
<ul id="v-menu2" class="v-menu">
<li><a href="#">Technology</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Css Gallery</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Programming</a></li>
</ul>

CSSは上で書いたのを使います。
JqvaScriptの指定は以下の通り。

$(document).ready(function(){
	$("#v-menu2").hide();
	$("#toggle").click(function(){
		$("#v-menu2").slideToggle("slow");
	});
});

実はこれだと画像が変化しないので、一つ指定がたりないのですが、
スライド部分はコレだけでＯＫ。
スライドする速度も指定できるし、
Mootoolsよりも指定が楽かなって思います。

プレビューはこちら
・jQuery
・Mootools

MootoolsとjQueryの明らかな違い

上のプレビューをみて気づいた。
指定の違いからくるものかもしれませんが、
明らかに動作が違ったので紹介しておきます。

FirefoxのアドオンのFirebugで動きを見たところ、
こんな違いが出ていました。

jQuery

動作前

動作後

Mootools

動作前

動作後

最初から違う二つ

HTMLもCSSも同じなのに、スクリプトでこんな風に変わるとは。
jQueryはstyleの指定は増えるものの、特に変化がないのがわかる。
ところがMootoolsの方は、最初からulがdivで囲まれている。
そんな指定は一切していないのに、動作が最初から違うのだ！

この違いには驚いた。
なので、このエントリーの最初に書いたCSSでは、
Mootoolsのスライドの位置が右にある。
divが入ってしまっているからだろう

Mootoolsを使う際は、この違いに気をつけたほうがよさそうだ。

ってことでMootoolsのほうのCSSを少し変更した。
ボタンのほうのfloatの指定を削除しました。

・Mootools

やっぱり僕はjQueryの方が使いやすいなって感じたエントリーでした。

皆さんのサイトのエフェクトに、使ってみてはどうでしょう！

参考サイト：