THE HAM MEDIA BLOG

Two CSS vertical menu with show/hide effects

ã‹L‚̃TƒCƒg‚ɂāAc•À‚Ñ‚É‚È‚Á‚Ä‚¢‚郁ƒjƒ…[‚ª
JavaScript‚ÆMootools‚ðŽg‚Á‚ďЉ‚ê‚Ä‚¢‚½‚Ì‚Å‚·‚ªA
ƒTƒ“ƒvƒ‹‚̃vƒŒƒrƒ…[‚̉摜‚ªØ‚ê‚Ä•\Ž¦‚³‚ê‚Ä‚¢‚½‚èA
‰¡•‚ð‰æ‘œ‚Æ“¯‚¶‚É‚µ‚½‚¢‚ÆŽv‚Á‚½‚̂ŁAƒ\[ƒX‚ð­‚µ‚¢‚¶‚Á‚Ä‚Ý‚Ü‚µ‚½B

‚»‚µ‚āA–l‚ÍMootools‚ÆjQuery‚Ì“ñ‚‚̕û–@‚ŁA
Web2.0•—‚̏cƒƒjƒ…[‚Ìshow/hideƒGƒtƒFƒNƒg‚ð‚‚¯‚½‚̂ŁA
”äŠr‚µ‚Ă݂悤‚ÆŽv‚¢‚Ü‚·B

CSS

‚¢‚«‚È‚è‚Å‚·‚ªA•ÏXŒã‚ÌCSS‚ð‘‚¢‚Ä‚¨‚«‚Ü‚·B

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Ý’肾‚ƁAƒNƒŠƒbƒN‚µ‚½Œã‚̉摜‚ð•ÏX‚µ‚Ü‚¹‚ñB
ì‚Á‚Ä‚¢‚éÅ’†‚É–Y‚ê‚Ä‚¢‚½‚Ì‚Å‚·‚ªA‚²—¹³‚­‚¾‚³‚¢B

Žå‚ȕύX(C³)“_

Žå‚ȕύX“_‚Æ‚µ‚ẮAƒXƒ‰ƒCƒh‚µ‚ďo‚Ä‚­‚é•”•ª‚̃TƒCƒY‚ðŒÅ’肵‚Ü‚µ‚½B
‚¸‚ê‚Ä‚¢‚Ä‚à—Ç‚©‚Á‚½‚Ì‚Å‚·‚ªA“¯‚¶‚É‚µ‚½‚©‚Á‚½‚Ì‚Å‚·B

‚»‚ê‚ƁA”wŒi‚É“ü‚ê‚ç‚ê‚Ä‚¢‚½‰æ‘œ‚àŒ©‚¦‚é‚悤‚É‚µ‚Ü‚µ‚½B
width‚ðŽw’肵‚½‚­‚ç‚¢‚Å‚·‚¯‚ǂˁB
(‚±‚Ì’iŠK‚ŃNƒŠƒbƒNŒã‚̉摜‚ðÁ‚µ‚Ä‚µ‚Ü‚Á‚½‚̂ŁA
”wŒi‰æ‘œ‚ÌŽw’è‚͏Á‚³‚È‚¢•û‚ª‚¢‚¢‚©‚à‚µ‚ê‚Ü‚¹‚ñB)

‚»‚µ‚āAƒXƒ‰ƒCƒh‚µ‚ďo‚Ä‚­‚é•”•ª‚ª‚«‚¿‚ñ‚Ɖ摜‚̉º‚Æ
‚­‚Á‚‚­‚悤‚ɏ­‚µ‚‚³‚𒲐߂µ‚Ü‚µ‚½B
IE‚¾‚Æmargin-top‚ª—LŒø‚É‚È‚Á‚Ä‚µ‚Ü‚Á‚Ä‚¢‚½‚̂ŁA margin-top‚àíœ‚µ‚Ü‚µ‚½B

ƒŠƒXƒg‚̍‚‚³‚à‚»‚ꂼ‚ꓯ‚¶‚É‚µ‚悤‚ÆŽv‚Á‚½‚̂ŁA
float‚Æclear‚ðŽw’肵padding‚Å“¯‚¶‚‚³‚É‚È‚é‚悤‚É‚µ‚Ü‚µ‚½B
‚±‚Ì“ñ‚‚ðŽw’肵‚Ä‚¢‚È‚¢‚ƁA‚È‚º‚©—]”’‚ª‘½‚­‚Æ‚ç‚ê‚Ä‚µ‚Ü‚¢A
•\Ž¦‚ªƒuƒ‰ƒEƒU‚Å“¯‚¶‚É‚È‚ç‚È‚©‚Á‚½‚̂ŁAŽw’肵‚Ü‚µ‚½B

‚±‚ê‚ňꉞA“¯‚¶ƒTƒCƒY‚É‚È‚Á‚Ä‚¢‚é‚ÆŽv‚¢‚Ü‚·B

‚±‚ÌŽw’è‚ŁA‰¡‚̃TƒCƒY‚̓{ƒ^ƒ“‚àƒXƒ‰ƒCƒh‚à‚ ‚킹‚ç‚ê‚Ü‚·I
‚»‚µ‚ă{ƒ^ƒ“‚ƃXƒ‰ƒCƒh‚µ‚Ä‚­‚郊ƒXƒg‚Ì‹«ŠE‚à
‚­‚Á‚‚­‚悤‚É‚È‚Á‚Ä‚¢‚é‚ÆŽv‚¢‚Ü‚·B

‚È‚É‚©ƒoƒO‚ª‚ ‚ê‚΂²•ñ‚¨Šè‚¢‚µ‚Ü‚·B

jQuery‚ÆMootools

–l‚ªŽå‚É—˜—p‚µ‚Ä‚¢‚é‚Ì‚ÍjQuery‚È‚ñ‚Å‚·‚ªA
ƒvƒŒƒrƒ…[‚É‚ ‚Á‚½Mootools‚à­‚µ‚³‚í‚Á‚Ä‚Ý‚Ü‚µ‚½B

‚¿‚å‚Á‚Æ‚µ‚©‚¢‚¶‚Á‚Ä‚¢‚È‚¢‚̂ŁA‚È‚ñ‚Æ‚àŒ¾‚¦‚È‚¢‚Ì‚Å‚·‚ªA
‚¿‚å‚Á‚Æ‚È‚ê‚È‚¢‚ÆŽg‚¢‚Â炢‚Ì‚©‚à‚µ‚ê‚Ü‚¹‚ñB
‚Å‚·‚ªAMootools‚É‚ÍMootools‚Ì‚¢‚¢•”•ª‚à‚ ‚é‚悤‚È‚Ì‚Å
—p“r‚É‚æ‚Á‚ÄŽg‚¢•ª‚¯‚é‚Æ‚¢‚¢‚ÆŽv‚¢‚Ü‚·B

jQuery‚ōì‚Á‚½‚Æ‚«‚̃\[ƒX

Mootools‚̃\[ƒX‚Í‚·‚łɏo‚Ä‚¢‚é‚̂ŏȗª‚µ‚Ü‚·B

<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‚͏ã‚ŏ‘‚¢‚½‚Ì‚ðŽg‚¢‚Ü‚·B
JqvaScript‚ÌŽw’è‚͈ȉº‚Ì’Ê‚èB

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

ŽÀ‚Í‚±‚ꂾ‚Ɖ摜‚ª•Ï‰»‚µ‚È‚¢‚̂ŁAˆê‚ÂŽw’肪‚½‚è‚È‚¢‚Ì‚Å‚·‚ªA
ƒXƒ‰ƒCƒh•”•ª‚̓RƒŒ‚¾‚¯‚Å‚n‚jB
ƒXƒ‰ƒCƒh‚·‚鑬“x‚àŽw’è‚Å‚«‚邵A
Mootools‚æ‚è‚àŽw’肪Šy‚©‚È‚Á‚ÄŽv‚¢‚Ü‚·B

ƒvƒŒƒrƒ…[‚Í‚±‚¿‚ç
EjQuery
EMootools

Mootools‚ÆjQuery‚Ì–¾‚ç‚©‚ȈႢ

ã‚̃vƒŒƒrƒ…[‚ð‚Ý‚Ä‹C‚¢‚½B
Žw’è‚̈Ⴂ‚©‚ç‚­‚é‚à‚Ì‚©‚à‚µ‚ê‚Ü‚¹‚ñ‚ªA
–¾‚ç‚©‚É“®ì‚ªˆá‚Á‚½‚̂ŏЉ‚Ä‚¨‚«‚Ü‚·B

Firefox‚̃AƒhƒIƒ“‚ÌFirebug‚Å“®‚«‚ðŒ©‚½‚Æ‚±‚ëA
‚±‚ñ‚ȈႢ‚ªo‚Ä‚¢‚Ü‚µ‚½B

jQuery

“®ì‘O

“®ìŒã

Mootools

“®ì‘O

“®ìŒã

Å‰‚©‚çˆá‚¤“ñ‚Â

HTML‚àCSS‚à“¯‚¶‚Ȃ̂ɁAƒXƒNƒŠƒvƒg‚Å‚±‚ñ‚È•—‚É•Ï‚í‚é‚Ƃ́B
jQuery‚Ístyle‚ÌŽw’è‚Í‘‚¦‚é‚à‚̂́A“Á‚ɕω»‚ª‚È‚¢‚Ì‚ª‚í‚©‚éB
‚Æ‚±‚낪Mootools‚Ì•û‚́AÅ‰‚©‚çul‚ªdiv‚ň͂܂ê‚Ä‚¢‚éB
‚»‚ñ‚ÈŽw’è‚͈êØ‚µ‚Ä‚¢‚È‚¢‚̂ɁA“®ì‚ªÅ‰‚©‚çˆá‚¤‚Ì‚¾I

‚±‚̈Ⴂ‚É‚Í‹Á‚¢‚½B
‚Ȃ̂ŁA‚±‚̃Gƒ“ƒgƒŠ[‚̍ŏ‰‚ɏ‘‚¢‚½CSS‚ł́A
Mootools‚̃Xƒ‰ƒCƒh‚̈ʒu‚ª‰E‚É‚ ‚éB
div‚ª“ü‚Á‚Ä‚µ‚Ü‚Á‚Ä‚¢‚é‚©‚炾‚낤

Mootools‚ðŽg‚¤Û‚́A‚±‚̈Ⴂ‚É‹C‚ð‚‚¯‚½‚Ù‚¤‚ª‚悳‚»‚¤‚¾B

‚Á‚Ä‚±‚Æ‚ÅMootools‚Ì‚Ù‚¤‚ÌCSS‚ð­‚µ•ÏX‚µ‚½B
ƒ{ƒ^ƒ“‚Ì‚Ù‚¤‚Ìfloat‚ÌŽw’è‚ðíœ‚µ‚Ü‚µ‚½B

EMootools

‚â‚Á‚Ï‚è–l‚ÍjQuery‚Ì•û‚ªŽg‚¢‚â‚·‚¢‚È‚Á‚ÄŠ´‚¶‚½ƒGƒ“ƒgƒŠ[‚Å‚µ‚½B

ŠF‚³‚ñ‚̃TƒCƒg‚̃GƒtƒFƒNƒg‚ɁAŽg‚Á‚Ä‚Ý‚Ä‚Í‚Ç‚¤‚Å‚µ‚傤I