このページの本文へ

英国の映像作家も使うJS製LavaLampメニュー

2009年05月18日 11時00分更新

古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

■完成した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/lavalamp.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.2.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/booklist.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>
<!-- グローバルナビゲーション -->
<ul class="lavaLampWithImage">
<li><a href="#">トップ</a></li>
<li><a href="#">ブックレビュー</a></li>
<li><a href="#" class="currentPos">ブックストア</a></li>
<li><a href="#">ブック&シネマ</a></li>
</ul>
<div>
<div style="width:50%; margin:20px auto;">
<h2>NADiff A/P/A/R/T</h2>
<p style="float:left; margin-right:10px;"><img src="images/shop/1.jpg" alt="NADiff" width="200" height="200"></p>
<p>デザイン、アート系の本が揃うおしゃれな本屋さん。地下や2Fから上はギャラリー、カフェなどが入っている。お隣の昭和な香り漂うアパートとのミスマッチもよい感じ。分かりにくい場所なので地図を見ながらタコ公園のあたりうろうろしてみよ……(<a href="#">続きを読む</a></p>
<ul>
<li>ジャンル:アート/デザイン</li>
<li>最寄り駅:恵比寿</li>
<li>住所:渋谷区恵比寿1-18-4</li>
</ul>
</div>
<br style="clear:both;">
</div>
<div id="wrapper">
<div id="book_contents">
<div id="bookmain">
<div class="contents">
<!-- Booklist Table -->
<table id="booklist">
<thead>
<tr><th>写真</th><th>書店名</th><th>ジャンル</th><th>最寄駅</th><th>住所</th></tr>
</thead>
<tbody>
<tr><th width="72"><img src="images/shop/thumb/1b.jpg" width="72" height="36" alt="NADiff A/P/A/R/T"></th>
<td>NADiff A/P/A/R/T</td>
<td>アート/デザイン</td>
<td>恵比寿</td>
<td>渋谷区恵比寿1-18-4</td></tr>
<tr><th><img src="images/shop/thumb/2b.jpg" width="72" height="36" alt="SHIBUYA BOOKSELLERS"></th>
<td>SHIBUYA BOOKSELLERS</td>
<td>アート/デザイン</td>
<td>渋谷/代々木八幡</td>
<td>渋谷区神山町17-3 </td></tr>
<tr><th><img src="images/shop/thumb/3b.jpg" width="72" height="36" alt="ブックファースト新宿店"></th>
<td>ブックファースト新宿店</td>
<td>総合</td>
<td>新宿</td>
<td>新宿区西新宿1-7-3</td></tr>
<tr><th><img src="images/shop/thumb/4b.jpg" width="72" height="36" alt="COW BOOKS 南青山"></th>
<td>COW BOOKS 南青山</td>
<td>ライフスタイル</td>
<td>表参道</td>
<td>港区南青山3-13-14-2F</td></tr>
<tr><th><img src="images/shop/thumb/5b.jpg" width="72" height="36" alt="高円寺文庫センター"></th>
<td>高円寺文庫センター</td>
<td>サブカル</td>
<td>高円寺</td>
<td>杉並区高円寺北2-10-5</td></tr>
<tr><th><img src="images/shop/thumb/6b.jpg" width="72" height="36" alt="BOOK246"></th>
<td>BOOK246</td>
<td>ライフスタイル</td>
<td>青山1丁目</td>
<td>港区南青山1-2-6 Lattice 青山</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="book_navi_1">
<div id="booknavileft">
<h3>最近追加した本屋さん</h3>
<ul>
<li><a href="#">BOOK246</a></li>
<li><a href="#">ブックファースト新宿店</a></li>
<li><a href="#">青山ブックセンター六本木店</a></li>
<li><a href="#">ちえの木の実</a></li>
<li><a href="#">古書ビビビ</a></li>
<li><a href="#">BOOKSルーエ</a></li>
</ul>
<h3>懐かしの本屋さん</h3>
<ul>
<li><a href="#">新栄堂書店池袋本店</a></li>
<li><a href="#">芳林堂書店池袋店</a></li>
</ul>
</div>
</div>
<div id="book_navi_2">
<div id="booknaviright">
<h3>行ってきましたfrom blog</h3>
<ul>
<li>できたての「ジュンク堂那覇店」に行ってみました<br>(09-05-01)</li>
<li>安楽亭の本屋さん。さいたま新都心の「ブックデポ書楽」へ<br>(09-04-25)</li>
<li>長野と言えば「平安堂」<br>(09-03-20)</li>
</ul>
</div>
</div>
</div>
<div id="book_footer">
<p>
&copy;Copyright 2009 TOKYO BOOK REVIEW
</p>
</div>
</body>
</html>

■完成したbooklist.jsファイル


$(function(){
    // ナビゲーション
    $(".lavaLampWithImage").lavaLamp({
        fx: "backout",
        speed: 700
    });
})

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く