掲示板/総合質問板/過去ログ/一覧/ 素材屋でよく見るあのタグ

0 名前：神子： 2006/09/02（土） 22:12 ID:XWzEE5P.: 素材屋で見るあのタグが知りたい。
例えば、『壁紙』をクリックしたら、下に１、２、３…と出る、
あのタグを知りたい。

簡単に言ったら、クリックしたら下にメニューが出るタグです。

教えて下さい。

1 名前：はな： 2006/09/02（土） 22:12 ID:fZTJWa4V: たしかジャバスクリプトだったと思います。
サンプルが今見つからないので、あったらお知らせしますね。

2 名前： sevi- ： 2006/09/02（土） 22:12 ID:9J5RKOHs

即興で構築してみたが,このようなものだろうか.

<html>
<head>
	<title>Untitled Page</title>
	<style type="text/css">
<!--
ol
{
	margin:0px;
	padding:0px;
	width:120px;
	color:white;
	background-color:MidnightBlue;
}
ol ol
{
	margin-left:2em;
}
li
{
	border:dotted thin black;
}
li a
{
	color:white;
}
-->
	</style>
	<script type="text/javascript">
<!--
function setDropDownList(ol, sChildElementName)
{
	sChildElementName = sChildElementName.toLowerCase();
	var childs = ol.childNodes;
	var child;
	var li_childs;
	var li_child;
	var list_ol;
	for(var i=0; i<childs.length; i++)
	{
		child = childs[i];
		if(child.nodeType != 1 || child.nodeName.toLowerCase() != sChildElementName)
			continue;
		li_childs = child.childNodes;
		list_ol = new Array();
		for(var j=0; j<li_childs.length; j++)
		{
			li_child = li_childs[j];
			if(li_child.nodeType != 1 || li_child.nodeName.toLowerCase() != ol.nodeName.toLowerCase())
				continue;
			list_ol.push(li_child);
			setDropDownList(li_child, sChildElementName);
		}
		if(list_ol.length > 0)
			setDropDownFunc(child, list_ol);
	}

	function setDropDownFunc(li, list_ol)
	{
		for(var i=0; i<list_ol.length; i++)
		{
			ol = list_ol[i];
			ol.style.display = "none";
		}
		li.onclick = function(event)
		{
			if(event == null)event = window.event;
			var target = (event.target != null)? event.target:event.srcElement;
			if(target != this)
				return;
			var ol;
			for(var i=0; i<list_ol.length; i++)
			{
				ol = list_ol[i];
				ol.style.display = (ol.style.display!="none")? "none":"block";
			}
		};
	};
}
function initialize()
{
	var ols = document.getElementsByTagName("ol");
	for(var i=0; i<ols.length; i++)
		setDropDownList(ols[i], "li");
}
//-->
	</script>

</head>
<body onload="initialize();">
	<ol style="position:absolute;">
		<li>壁紙
			<ol>
				<li>四季の風景
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>深海
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>空と鳥
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>背景サンプル
			<ol>
				<li>学校
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>教室
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>亜空間
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>
</body>
</html>

3 名前：はな： 2006/09/02（土） 22:12 ID:fXnL3zQw: 上にサンプルありましたね。
自分がジャバスクリプトだといったので一応レスしておきます。
とりあえずサンプルサイト見つけてきました。
たまに自分も使っているサイトです。
http://www.sky.sannet.ne.jp/masapine/java_top.html
ほかによく使うサイトとしては、うさのジャバスクリプトがあるけど、
いまリニューアル中みたいなので。

4 名前：神子： 2006/09/02（土） 22:12 ID:XWzEE5P.: はなサン＆sevi-サンありがとうございました＾＾
めっちゃ助かりました☆