Hey sobat blogger sekarang saya pengen berbagi ilmu nie seputaran cara membuat menu dock apple kenapa dikatakan begitu karena menu yang akan kita buat mirip dengan menu yang ada pada komputer merk apple buatan amerika itu, Yang kita perlukan dalam membuatnya tentu kita harus menyiapkan gambar yang akan menjadi gambarnya bisa anda buat sendiri dan saya contohkan gambarnya seperti ini:
Misalkan gambar seperti itu bisa anda gunakan sebagai contoh dalam pembuatan menu yang akan anda buat tenang saja bagi anda yang pengen instan nanti saya akan berikan contohnya lengkap dengan gambar dan menunya tetapi agar lebih baik simak dulu dah pelajaran ini dengan baik-baik agar anda tidak bingung untuk menambah atau mengurangi menu. Polder harus disesuaikan dengan gambar karena
pembuatan dokumen html haruslah tepat sedikitpun salah akan fatal akibatnya maka simak baik-baik buatlah folder dulu misalkan Apple dock kemudian buat folder Image dan Js untuk penyimpanan gambar dan file java setelah itu buata file css dan html untuk gambar silahkan anda buat sendiri atau menggunakan gambar diatas juga boleh maka sekarang buat dulu file cssnya, filenya seperti 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%;
}
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%;
}
---------------------------------------------------------------------------------------------------------
setelah itu ingat simpan dengan nama file style.css selanjutnya buatlah file javascrift yang akan membuat file ini beranimasi ada dua file yaitu: interface dan jquery yang pertama buat dulu interface berikut scriftnya:
---------------------------------------------------------------------------------------------------------bisa anda lihat pada download karena filenya terlalu panjang untuk di uraikan maka pada bagian penutup bisa anda download file Juery dan Interface.
---------------------------------------------------------------------------------------------------------
sudahkan gampang bukan sekarang kita implementasikan deh
---------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS 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 class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
<a class="dock-item2" 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>
---------------------------------------------------------------------------------------------------------
Silahkan anda pelajari dengan baik baik
Ingat untuk menambah menu gunakan scrift seperti ini untuk menambahkan:<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
maka ganti pada href dan img src sesuai dengan link yang akan anda buat sehingga nantinya akan menambah menu anda tidak hanya memiliki dua menu silahkan download disini untuk lebih jelasnya
