画像スライドメニューで「Image Menu」に比べて「Horizontal Accordion」は1kbと軽いのが特徴。
DEMO-A：「Image Menu」
DEMO-B：「Horizontal Accordion」
DEMO-A・・Image Menu
DEMO-B・・Horizontal Accordion
HTML・・Horizontal Accordion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Horizontal Slide Menu-DEMO</title>
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>
</head>
<body onload="slideMenu.build('sm',320,10,10,1)">
<ul id="sm" class="sm">
<li><img src="images/sam1.jpg" alt="" /></li>
<li><img src="images/sam2.jpg" alt="" /></li>
<li><img src="images/sam3.jpg" alt="" /></li>
<li><img src="images/sam4.jpg" alt="" /></li>
<li><img src="images/sam5.jpg" alt="" /></li>
</ul>
</body>
</html>
CSS・・Horizontal Accordion
* {margin:0; padding:0}
.sm {
list-style:none;
width:500px;
height:200px;
display:block;
overflow:hidden
}
.sm li {
float:left;
display:inline;
overflow:hidden
}
.sm li img {
border:1px solid #fff;
}