Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

Membuat Menu Mirip Apple Dock

apple dockApakah anda tahu menu yang dipunyai oleh Apple/Ipad, jika sudah tahu anda sekarang belajar membuat menu ala Apple yaitu yang biasanya disebut Apple Dock.

Menu Apple Dock biasanya berada di bawah layar desktop dan jika cursor dari mouse diletakkan diatasnya maka gambar yang berada dibawahnya akan menjadi besar dan seiring cursor digeser maka gambarnya ikut mengecil pula.

Dengan sedikit trik dari CSS dan bantuan Jquery siap pakai maka anda akan bisa membuat secara singkat menu ala Apple Dock .

Mari kita mulai…

Sekarang anda lihat code html dibawah ini :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Mac Dock</title>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/interface.js”></script>

<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”dock2″>

<div>

<a href=”#”><span>Home</span><img src=”images/home.png” alt=”home” /></a>
<a href=”#”><span>Contact</span><img src=”images/email.png” alt=”contact” /></a>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(

function()

{
$(‘#dock2’).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container2’,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

</body>

</html>

Anda copy code Html diatas ke Note pad dan simpan dengan ext .html, lalu juga copy code script CSS dibawah ini :

body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/main-bg.gif);
padding: 0;
margin: 0;
}
img {
border: none;
}
/* dock – top */

.dock {

position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 – bottom */

#dock2 {

width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

Lalu simpan dengan nama style.css dan langkah berikutnya anda perlu script dari jquery untuk membuat efeknya,anda bisa mendownloadnya disini

lihat-demo

Semoga artikel tentang pembuatan menu Apple Dock ini bisa bermanfaat bagi anda semuanya yang belajar CSS dan Jquery, untuk anda yang mahir bisa menambahi lewat  komentar anda …


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang



Kiriman oleh : Google FeedBurner

 

Leave a Reply



*