■完成したHTMLファイル
スペースの都合上、一部省略しています。すべてのソースコードは作例サイトをご覧ください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/imagescale.js"></script>
<script type="text/javascript" src="js/slidemenu.js"></script>
<title>東京食べ歩きガイド</title>
</head>
<body>
<div id="content">
<h1>東京食べ歩きガイド</h1>
<div id="menu">
<a href="youshoku/index.html" id="menu1">[洋食]</a>
<a href="washoku/index.html" id="menu2">[和食]</a>
<a href="chuka/index.html" id="menu3">[中華]</a>
<a href="sweets/index.html" id="menu4">[スイーツ]</a>
</div>
<div id="whatsnew">
<h4>最新記事</h4>
<ul id="newslist">
<li>新宿／岐阜屋の情報を追加しました (09/01/30)</li>
</ul>
</div>
</div>
<!-- 洋食 -->
<div id="youshoku" class="category">
<h2>洋食</h2>
<div class="food">
<img src="photo/shop1.jpg" width="60" height="40" align="left" alt="メリメロ">
メリメロ<br>
千代田区飯田橋4-5-4 第3山和ビル101<br>
<div class="info">
飯田橋から少し離れたところにあるフランス田舎料理のお店。オーガニック野菜や天然魚にこだわり。自家製のふかふかフォカッチャも◎。かわいいお店。<br>
<a href="shop1/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop2.jpg" width="60" height="40" align="left" alt="ハーブス">
ハーブス ルミネエスト新宿店<br>
新宿区新宿3-38-1 ルミネエスト新宿B2F<br>
<div class="info">
ルミネ地下にあるデッカイケーキが有名なお店。休日はいつも大行列。店内ではパスタセットも食べられるので、食事＆甘いもの食べたいときに。<br>
<a href="shop2/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop3.jpg" width="60" height="40" align="left" alt="ザッツ・バーガー">
ザッツ・バーガー・カフェ代々木店<br>
渋谷区千駄ヶ谷5-18-1<br>
<div class="info">
ちょっと前に流行った佐世保バーガーの店。代々木駅ほど近く、ドコモビルのそば。少し時間がかかるけど肉が焼けるところを見ながら待つのが楽しみ。<br>
<a href="shop3/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop4.jpg" width="60" height="40" align="left" alt="ZOZOI">
ZOZOI<br>
豊島区西池袋3-22-6<br>
<div class="info">
西口・立教大学近くの小さな公園の前にあるこじゃれたカフェ。もともと池袋にはあんまりない、落ち着いた雰囲気。優雅な休日のランチに。<br>
<a href="shop4/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div id="footer">
<div id="copyright"><img src="../shared/images/copyright.gif" width="170" height="7" alt="COPYRIGHT 2009 TOKYO TABEARUKI GUIDE"></div>
<a href="#" id="about">ABOUT</a>
<a href="#" id="contact">CONTACT</a>
</div>
</div>
<!-- 和食 -->
<div id="washoku" class="category">
<h2>和食</h2>
<!-- 中略 -->
</div>
<!-- 中華 -->
<div id="chuka" class="category">
<h2>中華</h2>
<!-- 中略 -->
</div>
<!-- スイーツ -->
<div id="sweets" class="category">
<h2>スイーツ</h2>
<!-- 中略 -->
</div>
</body>
</html>
■完成したslidemenu.jsファイル
$(function(){
var selectNo = 1;
var minLeft = -640;
// メニューイベントを設定
var baseX = $("#content").offset().left;
$("#washoku,#chuka,#sweets").css("left",minLeft);
$("#youshoku").css("left",baseX);
// クリックイベントの設定
$("#menu1").click(function(){
$("*:animated").stop();
$("#washoku,#chuka,#sweets").css("left", minLeft);
$("#youshoku").animate({ left : baseX });
selectNo = 1;
return false;
});
$("#menu2").click(function(){
$("*:animated").stop();
$("#youshoku,#chuka,#sweets").css("left", minLeft);
$("#washoku").animate({ left : baseX });
selectNo = 2;
return false;
});
$("#menu3").click(function(){
$("*:animated").stop();
$("#youshoku,#washoku,#sweets").css("left", minLeft);
$("#chuka").animate({ left : baseX });
selectNo = 3;
return false;
});
$("#menu4").click(function(){
$("*:animated").stop();
$("#youshoku,#washoku,#chuka").css("left", minLeft);
$("#sweets").animate({ left : baseX });
selectNo = 4;
return false;
});
// リサイズイベントの処理
$(window).resize(function(){
baseX = $("#content").offset().left;
switch(selectNo){
case 1:
$("#youshoku").css("left", baseX);
$("#washoku,#chuka,#sweets").css("left", minLeft);
break;
case 2:
$("#washoku").css("left", baseX);
$("#youshoku,#chuka,#sweets").css("left", minLeft);
break;
case 3:
$("#chuka").css("left", baseX);
$("#youshoku,#washoku,#sweets").css("left", minLeft);
break;
case 4:
$("#sweets").css("left", baseX);
$("#youshoku,#washoku,#chuka").css("left", minLeft);
break;
}
});
});
