こちらで紹介されている「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(サンプル画像１) repeat scroll 0%;
}
#imageMenu ul li.sample2 a {<br />
background: url(サンプル画像２) repeat scroll 0%;
}
#imageMenu ul li.sample3 a {
background: url(サンプル画像３) repeat scroll 0%;
}
#imageMenu ul li.sample4 a {<br />
background: url(サンプル画像４) repeat scroll 0%;
}
#imageMenu ul li.sample5 a {
background: url(サンプル画像５) repeat scroll 0%;
width: 310px;
}
.clear {
clear: both;
}
ピンバック: mootools – ne4.org