Menu Navigasi CSS Mac Dock

Akhirnya kesampaian juga saya membuat postingan ini, bagaimana cara membuat Menu navigasi CSS Mac Dock mungkin menu navigasi yang satu ini sudah sering kita liat berkeliaran di internet dan bermacam metode cara pemasangannya, nah kali ini kita coba untuk membuatnya ya walau pun postingan saya kali ini aga telat dari pada yang lain mohon di maafkan :), ya udah dari pada basa-basi terus langsung saja kita buat berikut langkah-langkahnya. o.iya liat dulu demonya sebelum mencoba bagi yang belum tau, tapi bagi yang sudah tau langsung aja.

• Masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* ---------------
http://www.amcied-logica.blogspot.com/
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOf2gR0Ze6sbgSdMu9I60wIASMuoIvyDv8tyUQq31qXXWw-nmLtkbc4erHuSTQM6HTdd1L3pCaxYN8g06GCk3lHUrNrwJwbyY1Wd4cOjuF0nwvVvZtSki8RtAl69jKa9Mvc3Vc-2rTEk/s1600/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;
}

• Selanjutnya Copas lagi script dibawah ini, diatas code </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://amcied-logica2.googlecode.com/files/interface.js"></script>

• Lanjut lagi di bagian Body template, letakkan script di bawah ini, di atas </body>

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

• Simpan templet, setelah itu copas lagi script di bawah ini dan letakkan dimana saja sesuai kesukaan teman-teman, disini saya meletakkannya di HTML/JavaScript sebagai contoh.

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7rGLNK-3mZB0KSHILNCVxS2eqlONxt-cIHInDWxRdVqKArgGV3fkya0n4J4LRsZtt1xvyDKiO8RtJoMzM4h48E96DadXZho8c6pWDE0AT82RjtSByeNA0cKJXaB1GmJXYmr168HMnKs/s1600/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnuHyAQa0ESEHMMXpPGp1iM2XCy510IRIyNmdSMxn3Obu9vgeSSfFnCZbEZ6my9cKO5hputGTqZgI4d7DsPY_-cK2JxtBarbXGW-1DCWK6jy0DYAiDeLxxdp0IHOPa8aAKl1ILRpZXbY/s1600/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzNA-BDUOCkFCkAEOxsNyrtFW4mziOujHTjLdo8joz5fTuEBO_A3ngX2-OpSqtTKfElnLQTxtyp02ykKtGwb3BDVnG2alJ4owDrecfdRXik7mbgVmOBnFub5vQT2YvfYbRh9XEZdfSkc/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKd0iuSDr54h5FvRCW_hYu8MSfNkYKO2xWoaK7yRfy-jrRFUj-97YoD7s0XGqw0fcdMNjurGqLzV8f2ZgvnkNW54BOKAgkopjQT-YeTGVWDc_6njx-14wUxfBSW-PBtwU_W_q0RFLwUr0/s1600/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhek3ZcsgH9FOcbR1-XpagVQR-oGI39s0o2SyJQ_4yGHaHYkr-fsEAu2IoAhL2XoispMeb-SqIaY-LSmploKHKS5XmqJ_jHBDLWHOWSZErBQCCpn_afcpqHrUCw5FDabu7ujGQOsn2ZFdM/s1600/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijPJOoFVbzfA08EJymwvTwMqxO66gRLUHyylsgYO-XplmCjZ8BvLmshxQiHBOJ1qe4Irja4jo3HcStMZaT-mw7lchPYlyTEtu-hJGyOPJSRa3nl2RhJD0bjSz9-KJAf9W6Uz2s0t6ZhQ/s1600/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0KO2lysRLy8-mcGrPGpv-m9e1CxleufTpTvwWLCC7YaPjtU5OsdELEG71lRlD6nprMXA0GO8DbKw0iX9HlOx97qcA2SulFcaHIfZ_M3uRD_e4D9MVvIS7w2-7CiTPktey5iyByYV8q8/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_6LvKpo2kMUAM_PrHM1ED2gFdfIGJJ1iZlA72YH6N6vckronU4dxhQJWICZgbiLzd92Srg-7TE0sb4FXMvMPlG0IGjYbOvaH_Bry5kW1PHC9OS-byW5E-hRfsmXWgw0KVvWbhZElj8E/s1600/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBWCZQSHBoCsVdfxu3nFFTYccnkvhPdZAR-sUCMKTqY6zJnaxItv7RHSv3eeOp759FgjBZrjQ0MQwjf81mPJr0WApj1Np4MVSZWQrPQ_LnKDOgVMUt2xOryJDevA8qYiWm8UAioOGxTg/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

Selesai...!!! semoga bermanfaat.. :)

Read More..