画像スライドメニューImage Menu「mootools.js」


こちらで紹介されている「Image Menu]は簡単に画像スライドメニューが作成できます。
サイトからダウンロードして試してみてください。imageMenu.js、mootools.jsを使用してます。

DEMO・・サンプル画像を5枚用意したデモ


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image menu-DEMO</title>
<link href="imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>
</head>
<body>
	<div id="imageMenu">
	<ul>
	<li class="sample1"><a href="#">sample1</a></li>
	<li class="sample2"><a href="#">sample2</a></li>
	<li class="sample3"><a href="#">sample3</a></li>
	<li class="sample4"><a href="#">sample4</a></li>
	<li class="sample5"><a href="#">sample5</a></li>
	</ul>
	</div>
<script type="text/javascript">
	window.addEvent('domready', function(){
	var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onclick:function(e,i){alert(e);}});
	});
</script>
</body>
</html>
CSS
#imageMenu {
	position: relative;
	width: 500px;
	height: 200px;
	overflow: hidden;
}
#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	}
#imageMenu ul li {
	float: left;
}
#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:98px;
	height: 200px;
}
#imageMenu ul li.sample1 a {
	background: url(サンプル画像1) repeat scroll 0%;
}
#imageMenu ul li.sample2 a {<br />
	background: url(サンプル画像2) repeat scroll 0%;
}
#imageMenu ul li.sample3 a {
	background: url(サンプル画像3) repeat scroll 0%;
}
#imageMenu ul li.sample4 a {<br />
	background: url(サンプル画像4) repeat scroll 0%;
}
#imageMenu ul li.sample5 a {
	background: url(サンプル画像5) repeat scroll 0%;
	width: 310px;
}
.clear {
	clear: both;
}

関連記事

コメント»画像スライドメニューImage Menu「mootools.js」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*