2/2 画像スライドメニュー

JavaScript

jQuery 画像スライドメニュー

20120203110234

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>画像スライドメニュー</title>
<link href="css/import.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">
<div id="imageMenu">
<ul>
<a href="#"><li class="imgM opt1"><em>カテゴリ1</em></li></a>
<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>

import.css
複数のCSSファイルを1つのCSSだけで読み込ませる

@charset "utf-8";

@import "reset.css";
@import "base.css";
@import "imageMenu.css";

reset.css

@charset "utf-8";

* {
	margin:0;
	padding:0;
	line-height: 1.0;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif;
}

ul li, ol li, {
	llist-style-type: none;
}

a {
	text-decoration: none;
}

img {
	border: 0;
}

img,input {
	vertical-align:middle;
}

base.css

@charset "utf-8";

body {
	background: #fff;
}

ul {
	font-weight: nomal;
	list-style-type:none;
}

#container {
	width:1000px;
	padding: 0;
	margin: 50px auto;
	background: #fff;
}

#images {
	display:none;
}

imageMenu.css

@charset "utf-8";

#imageMenu li {
	float:left;
	width:120px;
}

#imageMenu li a {
	display:block;
}

#imageMenu .imgM{
	display: block;
	cursor: pointer;
	overflow:hidden;
	height:200px;
	width:120px;
	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;
}