jQuery@2月3日
Little-Boxes-Menu-with-jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Little Boxes Menu with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print"/> </head> <body> <div class="title"> <h1>Little Boxes Menu with jQuery</h1> </div> <div id="content"> <a class="back" href="http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery">Back to Codrops</a> <div id="littleBoxes" class="littleBoxes"> <div class="boxlink bg1" style="top:0px;left:0px;"> <a href="">About</a> <div class="boxcontent"> <p>当店は、本場フランスのお菓子を日本も皆様にも、是非味わっていだたきたい。その思いを込めて、昨年にopen致しました。<br /> まるでパリのCafeにいるかの様な、かわいらしいお店です。 </p> </div> </div> <div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div> <div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div> <div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div> <div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div> <div class="boxlink bg2" style="top:95px;left:95px;"> <a href="">Menu</a> <div class="boxcontent"> <p>吟味された素材を、心を込めて手作りしたケーキやマカロン。焼きたてのブレッド等。是非、店内で当店自慢のドリンクと共にお召し上がり下さい。おしゃれで個性ゆたかな味わいは、贈り物としても喜んでいただいています。 </p> </div> </div> <div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div> <div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div> <div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div> <div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div> <div class="boxlink bg3" style="top:190px;left:190px;"> <a href="">Chef</a> <div class="boxcontent"> <p>パリの名門店で、チーフシェフとして活躍していた、ミッシェル・ポレナルフ氏を招き、伝統ある本場の味をお客様に味わっていただけます。<br /> 原材料も、ミッシェル氏がこだわり抜いた、安心な食材だけをフランスより、毎日空輸で仕入れております。 </p> </div> </div> <div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div> <div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div> <div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div> <div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div> <div class="boxlink bg4" style="top:285px;left:285px;"> <a href="">Contact</a> <div class="boxcontent"> <p>ご注文やご意見等は、こちらからどうぞよろしくお願い致します。</p> <br /> <br /> <p> ※ 尚、このサイトはweb練習用に制作した、架空のサイトです。どうぞご了承下さい。</p> <p> © Luc Viatour (CC BY-SA 3.0) in the immediate vicinity of the image. </p> </div> </div> </div> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/lbm.js"></script> </body> </html>
◎参考サイト
http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/
Beautiful-Background-Image
<!DOCTYPE HTML> <html lang="ja"> <head> <title>Beautiful Background Image Navigation</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print"/> <!--[if lte IE 6]> <link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.bgpos.js"></script> <script type="text/javascript" src="js/bbi.js"></script> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">会社案内</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">ごあいさつ</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">業務内容</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">ブランド</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Ladies</a></li> <li><a href="#">Mens</a></li> <li><a href="#">kids </a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">お問い合わせ</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">アドレス</a></li> <li><a href="#">メール</a></li> <li><a href="#">求人 </a></li> </ul> </li> </ul> </div><!--#menuWrapper--> </div><!--#content--> </body> </html>
◎参考サイト
http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/
