29分でできる！ あのサイトの“技”を盗め ― 第21回
意外性が心地よいJSメニューのWebデザイン
2009年04月13日 10時59分更新
■完成したHTMLファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>TOKYOブックマニア</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/booknavi.js"></script>
</head>
<body>
<div id="book_header">
<div>本屋巡りが趣味の管理人による独断と偏見の書評サイト</div>
<h1>TOKYOブックマニア</h1>
<img src="images/site/mark.gif" width="52" height="63" alt="">
</div>
<div id="page_title">
<h2>ブックレビュー//文芸</h2>
</div>
<div id="book_contents">
<div id="bookmain">
<div class="contents">
<!-- Page 01 -->
<div class="reviewPage">
<img src="images/1.jpg" width="384" height="192" alt="不思議を売る男">
<h2>不思議を売る男</h2>
<p>
子どもだけではもったいない。大人もちゃんと楽しめる良質な児童書。ストーリーは、本の世界から飛び出てきた緑色のジャケットを着た男が、居候先の古道具屋で道具にまつわる小話を展開していく、というもの。まずは読んでみてください。</p>
<p>
ジェラルディン マコーリアン(著)<br>
偕成社 #ISBN-10: 4035404209<br>
1,575円 (税込)<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 02 -->
<div class="reviewPage">
<img src="images/2.jpg" width="384" height="192" alt="就職しないで生きるには">
<h2> 就職しないで生きるには</h2>
<p>
晶文社の「就職しないで生きるには」シリーズのきっかけになったのが本書。本屋・出版社の経営、缶詰工場など、著者レイモンド･マンゴーが体験した、80年代アメリカを自由に生きる話は今でも十分、刺激的な内容。翻訳がこなれていないせいか、少々読みづらいのは確かだけど、そんなことを気にせずにスパッと読める。</p>
<p>
レイモンド マンゴー(著)<br>
晶文社 #ISBN-10: 4794963688<br>
1,470円 (税込)<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 03 -->
<div class="reviewPage">
<img src="images/3.jpg" width="384" height="192" alt="本を読む本">
<h2>本を読む本</h2>
<p>
たしか、大学に入ったときに最初に読んだ本。最近本屋の店頭に山積みになっているのを見て思い出した。大学時代には苦痛だったが、ひさびさに引っ張り出して読んでみるとおもしろい。本を読むとはこういうことだったのか……</p>
<p>
M.J.アドラー著(著)<br>
講談社学術文庫 #ISBN-10: 4061592998<br>
945円 (税込)<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 04 -->
<div class="reviewPage">
<img src="images/4.jpg" width="384" height="192" alt="セイフティボックス">
<h2>セイフティボックス</h2>
<p>
とっくの昔に絶版になってしまっている（文庫版はアリ）山田詠美のエッセイ本を思わず古本屋の店頭でジャケ買いならぬ装丁買い。角川書店の見城くん（いまは幻冬舎の社長）とか、時代を感じる描写がおもしろい。彼女のパーソナリティに触れたい方ならぜひ。……</p>
<p>
山田 詠美(著)<br>
講談社 #ISBN-10: 4062042738<br>
絶版中<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 05 -->
<div class="reviewPage">
<img src="images/5.jpg" width="384" height="192" alt="恋愛小説ふいんき語り">
<h2>恋愛小説ふいんき語り</h2>
<p>
この書評は現在執筆中……</p>
<p>
麻野 一哉,飯田 和敏,米光 一成(著)<br>
ポプラ社 #ISBN-10: 4591100057<br>
1,680円 (税込)<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 06 -->
<div class="reviewPage">
<img src="images/6.jpg" width="384" height="192" alt="うずまき猫のみつけかた">
<h2>うずまき猫のみつけかた </h2>
<p>
この書評は現在執筆中……</p>
<p>
村上 春樹(著)<br>
新潮社 #ISBN-10: 4103534206<br>
1,890円 (税込)<br>
<a href="#">Amazon で買う</a><br>
<a href="#">楽天市場で買う</a><br>
</p>
</div>
</div>
</div>
</div>
<div id="book_navi_1">
<div id="booknavileft">
<img src="menu/sidemenu1.gif" width="150" height="49" alt="文芸"><br>
<img src="menu/sidemenu2.gif" width="150" height="49" alt="アート"><br>
<img src="menu/sidemenu3.gif" width="150" height="49" alt="マンガ"><br>
<img src="menu/sidemenu4.gif" width="150" height="49" alt="趣味"><br>
</div>
</div>
<div id="book_navi_2">
<div id="booknaviright">
<ul id="bookmenu">
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
<li><img src="icon/1.jpg" width="80" height="80" alt="書籍1"></li>
<li><img src="icon/2.jpg" width="80" height="80" alt="書籍2"></li>
<li><img src="icon/3.jpg" width="80" height="80" alt="書籍3"></li>
<li><img src="icon/4.jpg" width="80" height="80" alt="書籍4"></li>
<li><img src="icon/5.jpg" width="80" height="80" alt="書籍5"></li>
<li><img src="icon/6.jpg" width="80" height="80" alt="書籍6"></li>
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
</ul>
</div>
</div>
<div id="book_footer">
<p>
©Copyright 2009 TOKYO BOOK REVIEW
</p>
</div>
</body>
</html>
■完成したbooknavi.jsファイル
$(function(){
// 左のナビゲーション
var nav_count = 0;
$("#booknavileft img").each(function(){
$(this).css({ "position":"absolute", "left":"0px", "top":nav_count*80+"px" });
nav_count++;
});
// 最初にアニメーションしながら引っ込むようにする
$("#booknavileft img").animate({ "left":"-130px" }, 1500);
// マウスイベントを設定する
$("#booknavileft img").hover(
function(){
$(this).animate({ "left":"0px" }, 500);
},
function(){
$(this).animate({ "left":"-130px" }, 500);
}
);
});
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- 第16回 jQueryアニメ＆エフェクト合わせ技で画像を拡大
- この連載の一覧へ
