jQuery - 画像スライドメニュー

DEMO

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像スライドメニュー</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print">
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>
<script type="text/javascript" src="js/images.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu .imgM'),{openWidth:640});
	});
</script>
</head>
<body>
<div id="container">
<h1>Sea Fishes of IEJIMA</h1>
<div id="imageMenu">
<ul>
<li class="imgM opt1"><em><a href="#">カテゴリ1</a></em></li>
<li class="imgM opt2"><em><a href="#">カテゴリ2</a></em></li>
<li class="imgM opt3"><em><a href="#">カテゴリ3</a></em></li>
<li class="imgM opt4"><em><a href="#">カテゴリ4</a></em></li>
<li class="imgM opt5"><em><a href="#">カテゴリ5</a></em></li>
<li class="imgM opt6"><em><a href="#">カテゴリ6</a></em></li>
<li class="imgM opt7"><em><a href="#">カテゴリ7</a></em></li>
<li class="imgM opt8"><em><a href="#">カテゴリ8</a></em></li>
</ul>
</div>
</div>
</body>
</html>

@charset "UTF-8";

/*reset.css
------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"Hiragino Kaku Gothic Pro W3",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS P Gothic",
		sans-serif;
}
ul li, ol li {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
img, input {
	vertical-align: middle;
}

/*base.css
------------------------------------------*/
body {
	background: #FFFFFF;
}
h1 {
	color: #4898DF;
	font-size: 1.8em;
	margin: 20px auto;
	text-align: center;
}
ul {
	font-weight: normal;
	list-style: none;
}
#container {
	width: 800px;
	padding: 0;
	background: #000;
	margin: 50px auto;
	background-color: #FFFFFF;
}
#images {
	display: none;
}

/*imageMenu.css
------------------------------------------*/
#imageMenu li {
	float: left;
	width: 97px;
}
#imageMenu li a {
	display: block;
}
#imageMenu .imgM {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 200px;
	width: 97px;
	background: #FFF;
	border-right: 2px solid #FFF;
}
#imageMenu .imgM em {
	visibility: hidden;
}
#imageMenu .opt1 {
	background: #FFF url(../images/01.jpg) no-repeat;
}
#imageMenu .opt2 {
	background: #FFF url(../images/02.jpg) no-repeat;
}
#imageMenu .opt3 {
	background: #FFF url(../images/03.jpg) no-repeat;
}
#imageMenu .opt4 {
	background: #FFF url(../images/04.jpg) no-repeat;
}
#imageMenu .opt5 {
	background: #FFF url(../images/05.jpg) no-repeat;
}
#imageMenu .opt6 {
	background: #FFF url(../images/06.jpg) no-repeat;
}
#imageMenu .opt7 {
	background: #FFF url(../images/07.jpg) no-repeat;
}
#imageMenu .opt8 {
	background: #FFF url(../images/08.jpg) no-repeat;
}

liteAccordion - a horizontal accordion plugin for jQuery

ナビゲーションメニューに応用した例

Social Magician Makoto Sakata | ソーシャルメディアのビジネス活用で中小企業の成功事例多数！坂田誠