2/3 Little Boxes Menu

JavaScript

jQuery Little Boxes Menu

20120204122512

HTML

<!DOCTYPE HTML>
<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;
}
body{
    background:#000 url(images/base.jpg) no-repeat top center;
    font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
    overflow:hidden;
}
h1{
    color:#aaa;
	font-size:12px;
    margin:20px 0px 20px 20px;
    text-shadow:1px 1px 1px #555;
    font-weight:normal;
}
a.back{
    position:absolute;
    bottom:5px;
    right:5px;
	text-transform:uppercase;
    color:#666;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
}

a.back:hover{
    color:#fff;
}


</style>
</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>トレヴァー・ホーンが立ち上げたZTTレコーズのサウンドエンジニアからなる正体不明のユニットとして結成された。1983年のミニアルバム制作を経てデビューアルバム「Who's Afraid of the Art of Noise?」を発表。その後、チャイナ・レコードへ移籍し、3枚のオリジナルアルバムを発表した。グループ名は、イタリア未来派の画家・作曲家・楽器発明家 ルイージ・ルッソロの論文「騒音芸術（Art Of Noises）」から引用。</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="">Single</a>
<div class="boxcontent">
<p> "Beat Box" (1983)
    "Moments In Love" (1983) and (1985)
    "Close (To the Edit)" (1984)
    "Legs" (1985)
    "Paranoimia", featuring Max Headroom (1986)
    "Peter Gunn", featuring Duane Eddy (1986)
    "Legacy" (1986)
    "Dragnet" (1987)
    "Kiss", featuring Tom Jones (1988)
    "Yebo!", featuring Mahlathini and Mahotella Queens (1989)
    "Art of Love"
    "Shades of Paranoimia"
    "Dreaming in Colour" (1998)
    "Metaforce", featuring Rakim (1999)
</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="">Album</a>
<div class="boxcontent">
<p> Into Battle with the Art of Noise (1983)<br>
    Who's Afraid of the Art of Noise?(1984)<br>
    In Visible Silence (1986)<br>
    In No Sense? Nonsense! (1987)<br>
    Below the Waste (1989)<br>
    The Seduction of Claude Debussy(1999)<br>
    Reduction (2000)
</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="">Official</a>
<div class="boxcontent">
<p>www.theartofnoiseonline.com/index.php</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>

CSS

@charset "UTF-8";

.littleBoxes{
    width:350px;
    height:350px;
    margin:30px auto;
    position:relative;
}
.littleBoxes > div{
    position:absolute;
    width:90px;
    height:90px;
    text-align:center;
    border:2px solid #333;
    overflow:hidden;
	background-color:#666; 
    -moz-box-shadow:0px 0px 3px #555;
    -webkit-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: 15px;
    font-weight:bold;
    
    display:block;
    line-height:90px;
    text-decoration:none;
    color:#aaa;
    background:#000;
    outline:none;
    text-shadow:1px 1px 1px #888;
    -moz-box-shadow:1px 1px 3px #777;
    -webkit-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;
    -moz-box-shadow:1px 1px 3px #777;
    -webkit-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);
}