画像スライドメニュー Horizontal Accordion「slidemenu.js」


画像スライドメニューで「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;
}

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*