<html lang="ja">
<head>
<title>Little Boxes Menu with jQuery</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<style>
*{
margin:0;
padding:0;
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meiryo,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
}
body{
background:#E4FFCF url(back.jpg) no-repeat top center;
font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
overflow:hidden;
}
h1{
color:#fff;
margin:40px 0px 20px 40px;
text-shadow:1px 1px 1px #555;
font-weight:normal;
text-align:center;
}
a.back{
position:absolute;
bottom:5px;
right:5px;
}
.reference{
position:absolute;
bottom:5px;
left:5px;
}
.reference p a, a.back{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
.reference p a:hover, a.back:hover{
color:#000;
}
</style>
</head>
<body>
<div class="title">
<h1>Little Boxes Menu with jQuery</h1>
</div>
<div id="content">
<div class="reference">
<p><a href="http://www.flickr.com/photos/adforce1/">Photos from williamcho's photostream on Flickr</a></p>
</div>
<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="">海ぶどう</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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="">沖縄そば</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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="">ゴーヤー</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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="">タコライス</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
<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/script.js"></script>
</body>
</html>
.littleBoxes{
width:350px;
height:350px;
margin:0 auto;
position:relative;
}
.littleBoxes > div{
position:absolute;
width:90px;
height:90px;
text-align:center;
border:2px solid white;
overflow:hidden;
background-color:#f7f7f7;
box-shadow:0px 0px 3px #555;
box-shadow:0px 0px 3px #555;
box-shadow:0px 0px 3px #555;
background-position:center center;
z-index:999;
}
.littleBoxes div a{
text-transform:uppercase;
font-size: 18px;
font-weight:bold;
letter-spacing:-1px;
display:block;
line-height:90px;
text-decoration:none;
color:#fff;
background:#91EF4A url(../bgItem.png) repeat-x top left;
outline:none;
text-shadow:1px 1px 1px #888;
box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
}
.littleBoxes div.boxcontent{
width:334px;
height:246px;
text-align:left;
padding:10px;
font-size:16px;
background-color:#f0f0f0;
border:2px solid #fff;
margin:10px 0px 0px 10px;
text-shadow:1px 1px 1px #fff;
box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
opacity:0.8;
display:none;
}
.bg1, .bg2, .bg3, .bg4{
background-repeat:no-repeat;
}
.bg1{
background-image:url(../images/1.jpg);
}
.bg2{
background-image:url(../images/2.jpg);
}
.bg3{
background-image:url(../images/3.jpg);
}
.bg4{
background-image:url(../images/4.jpg);
}
.bg5{
background-image:url(../images/5.jpg);
}
