画像スライドメニュー - ウェブ学のすすめ

プレビュー

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>画像スライドメニュー</title>
<link rel="stylesheet" href="style.css">
<script src="mootools.js"></script>
<script src="imageMenu.js"></script>
<script src="images.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script>
    window.addEvent('domready', function(){
	var myMenu = new ImageMenu($$('#imageMenu .imgM'),{openWidth:450});
    });
</script>
</head>
<body>
<div id="container">
<header>
    <h1>東京・千葉上空からの写真</h1>
</header>
<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>

CSS

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

body {
    background-color:#eee;
    font-family:
	"ヒラギノ角ゴ Pro W3", 
	"Hiragino Kaku Gothic Pro", 
	"メイリオ", 
	Meiryo, 
	Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif；
}
ul {
    list-style-type:none;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}

#container {
    width: 800px;
    margin: 30px auto;
    background-color:#eee;
}

header {
    background-color:#fff;
    border-left:10px solid #4494CF;
    padding:5px 0 5px 10px;
    margin:0 0 20px;
}

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

#imageMenu li a {
    display: block;
}

#imageMenu .imgM {
    display: block;
    cursor: pointer;
    overflow: hidden;
    height: 319px;
    width: 97px;
    background: #FFF;
    border-right: 2px solid #FFF;
}

#imageMenu .imgM em {
    visibility: hidden;
}

#imageMenu .opt1 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky1.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt2 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky2.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt3 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky3.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt4 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky4.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt5 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky5.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt6 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky6.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt7 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky7.jpg);
    background-repeat: no-repeat;
}

#imageMenu .opt8 {
    background-image:url(http://webgaku.hotcom-web.com/image/sky8.jpg);
    background-repeat: no-repeat;
}