忍者ブログ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

メニュー的な何か集

◎アコーディオンもどき
◎フェードで入れ替わるメニュー的な何か
◎スクロールで入れ替わるメニュー的な何か(縦)
◎スクロールで入れ替わるメニュー的な何か(横)
◎スライドトグルで開閉するメニュー的なもの
●●●●●


No.001「アコーディオンもどき」
css
#AAA {
	width: 300px;
}
#AAA .title {
	margin: 3px 0;
	padding: 0 5px;
	border-radius: 5px;
	background: #e5e5e5;
	cursor: pointer;
}
#AAA-box1, #AAA-box2, #AAA-box3 {
	height: 100px;
	margin: 3px 0;
	padding: 5px;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	word-wrap: break-word;
	overflow: auto;
}
#AAA-box2, #AAA-box3 {
	display: none;
}
html
<div id="AAA">
	<div class="title" onclick="$('#AAA-box1').slideDown(350);$('#AAA-box2,#AAA-box3').slideUp(350);">●●●</div>
	<div id="AAA-box1">
		testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
	</div>
	<div class="title" onclick="$('#AAA-box2').slideDown(350);$('#AAA-box1,#AAA-box3').slideUp(350);">▲▲▲</div>
	<div id="AAA-box2">
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		/(^o^)\<br />
		/(^o^)\<br />
		/(^o^)\<br />
	</div>
	<div class="title" onclick="$('#AAA-box3').slideDown(350);$('#AAA-box1,#AAA-box2').slideUp(350);">■■■</div>
	<div id="AAA-box3">
		てすと
	</div>
</div>


●●●●●


No.002「フェードで入れ替わるメニュー的な何か」
css
#BBB {
	width: 300px;
}
#BBB .title a {
	padding-right: 5px;
	cursor: pointer;
}
#BBB .fade-space {
	position: relative;
	height: 150px;
	border: 1px solid #ccc;
	border-radius: 6px;	
}
#BBB-box1, #BBB-box2, #BBB-box3 {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 288px;
	height: 140px;
	overflow: auto;
	word-wrap: break-word;
	background: #eee;
}
#BBB-box2, #BBB-box3 {
	display: none;
}
html
<div id="BBB">
	<div class="title">
		▼<a onclick="$('#BBB-box1').fadeIn(350);$('#BBB-box2,#BBB-box3').fadeOut(350); return false;">てすと</a>
		▼<a onclick="$('#BBB-box2').fadeIn(350);$('#BBB-box1,#BBB-box3').fadeOut(350); return false;">Test</a>
		▼<a onclick="$('#BBB-box3').fadeIn(350);$('#BBB-box1,#BBB-box2').fadeOut(350); return false;">( ゚д゚ )</a>
	</div>
	<div class="fade-space">
		<div id="BBB-box1">
			てすと
		</div>
		<div id="BBB-box2">
			testmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
		</div>
		<div id="BBB-box3">
			( ゚д゚) <br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			( ゚д゚ )
		</div>
	</div>
</div>


●●●●●


No.003「スクロールで入れ替わるメニュー的な何か(縦)」
css
#CCC {
	width: 300px;
}
#CCC .title a{
	padding-right: 5px;
	cursor: pointer;
}
#CCC-sc {
	height: 160px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	overflow: hidden;
}
.CCC-box {
	height: 150px;
	border: 5px solid #fff;
	overflow: auto;
	word-wrap: break-word;
	background: #eee;
}
html
<div id="CCC">
	<div class="title">
		▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 0 }, 400); return false;">test</a>
		▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 160 }, 400); return false;">オワタ</a>
		▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 320 }, 400); return false;">ナンテコッタイ</a>
		▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 480 }, 400); return false;">www</a>
	</div>
	<div id="CCC-sc">
		<div class="CCC-box">
			testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
		</div>
		<div class="CCC-box">
			\(^o^)/
		</div>
		<div class="CCC-box">
			/(^o^)\
		</div>
		<div class="CCC-box">
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
			m9(^Д^)<br />
		</div>
	</div>
</div>


●●●●●


No.004「スクロールで入れ替わるメニュー的な何か(横)」
css
#DDD {
	width: 300px;
}
#DDD .title a{
	padding-right: 5px;
	cursor: pointer;
}
#DDD-sc {
	width: 300px;
	height: 150px;
	border-top: 1px dotted #000;
	border-bottom: 1px dotted #000;
	overflow: hidden;
}
#DDD-sc-inner {
	width: 1200px;
	height: 150px;
}
.DDD-box {
	float: left;
	width: 300px;
	height: 140px;
	margin: 5px 0;
	overflow: auto;
	word-wrap: break-word;
	background: #eee;
}

/* clearfix(float解除用セレクタ) */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
html
<div id="DDD">
	<div class="title">
		▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 0 }, 500); return false;">text</a>
		▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 300 }, 500); return false;">オワタ</a>
		▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 600 }, 500); return false;">ナンテコッタイ</a>
		▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 900 }, 500); return false;">www</a>
	</div>
	<div id="DDD-sc">
		<div id="DDD-sc-inner" class="cf">
			<div class="DDD-box">
				testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
			</div>
			<div class="DDD-box">
				\(^o^)/
			</div>
			<div class="DDD-box">
				/(^o^)\
			</div>
			<div class="DDD-box">
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
				m9(^Д^)<br />
			</div>
		</div>
	</div>
</div>


●●●●●


No.005「スライドトグルで開閉するメニュー的なもの」
css
#EEE {
	width: 300px;
	border-bottom: 1px dotted #ccc;
	text-align: center;
	background: #eee;
}
#EEE .title {
	padding:5px;
	border-top: 1px dotted #ccc;
	cursor: pointer;
}
#EEE .title:hover{
	background: #fff;
}
#EEE-box1,
#EEE-box2,
#EEE-box3 {
	display: none;
	padding: 10px 5px 15px;
	word-wrap: break-word;
}
html
<div id="EEE">
	<div class="title" onclick="$('#EEE-box1').slideToggle(350);">title1</div>
	<div id="EEE-box1">
		testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
	</div>
	<div class="title" onclick="$('#EEE-box2').slideToggle(350);">title2</div>
	<div id="EEE-box2">
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
		\(^o^)/<br />
		/(^o^)\<br />
	</div>
	<div class="title" onclick="$('#EEE-box3').slideToggle(350);">title3</div>
	<div id="EEE-box3">
		てすとおおおおおおおおおおおおおおおおおおおおおおうおおおおおおおおおおおおおおおおおおおお
	</div>
</div>


全体的にもっとスマートな書き方あるんじゃ…とは思わなくもない。
PR

Comment

コメント
パスワード