In this post I'm going to show you how to create a nice dock layout that mimics the iPhone dock by using CSS and jQuery. All you need to do for this kind of layout is getting a collection of iPhone icons that you can freely download from the web. Done that, you need then a basic HTML structure to start with:
<div id="dock">
<ul>
<li id="safari"><a href="#"><span>Safari</span></a></li>
<li id="mail"><a href="#"><span>Mail</span></a></li>
<li id="settings"><a href="#"><span>Settings</span></a></li>
<li id="phone"><a href="#"><span>Phone</span></a></li>
</ul>
</div>
All these IDs will allow us to get a fine-grain control over the single items which, of course, will be replaced by icons. Now let's move to our CSS:
body {
padding: 2em 0;
margin: 0 auto;
width: 320px;
font: 62.5% Arial, sans-serif;
}
#dock {
width: 100%;
height: 91px;
background: url(mac-dock/dock.png) no-repeat;
}
#dock ul {
height: 100%;
width: 300px;
list-style: none;
margin: 0 auto;
padding: 0;
}
#dock li {
width: 59px;
height: 60px;
float: left;
margin-right: 15px;
position: relative;
left: 8px;
background-repeat: no-repeat;
text-align: center;
}
#dock li a {
float: left;
width: 100%;
height: 100%;
font-size: 1.2em;
text-decoration: none;
display: block;
text-align: center;
}
#dock li a span {
display: none;
background: #fff;
color: #000;
color: rgba(0, 0, 0, 0.5);
padding: 0.3em;
-moz-border-radius: 6px;
border-radius: 6px;
font-weight: bold;
position: relative;
top: 65px;
}
#dock #safari {
background-image: url(mac-dock/Safari.png);
left: 4px;
}
#dock #mail {
background-image: url(mac-dock/Mail.png);
}
#dock #settings {
background-image: url(mac-dock/Settings.png);
left: 12px;
}
#dock #phone {
background-image: url(mac-dock/Phone.png);
left: 15px;
}
We're using a tiled background image for our dock which has in it four black shadows for four icons. Now, since we want to place our icons exactly within each dock shadow, we use relative positioning to achieve this effect. Finally, jQuery adds a little animation to the previously hidden span elements:
$(document).ready(function() {
$('#dock ul li').each(function() {
var $li = $(this);
$li.hover(function() {
$li.find('span').fadeIn('slow');
}, function() {
$li.find('span').fadeOut('slow');
}
);
});
});