Menu navigasi CSS Mac Dock with jQuery

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------<br /> Menu navigasi CSS Mac Dock top with jQuery<br /> ---------------------------------- */<br /> .dock {<br /> position: relative; <br /> height: 50px; <br /> text-align: center;<br /> }<br /> .dock-container {<br /> position: absolute;<br /> height: 50px;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3zjvjWXEnCsncNeFernatJ6fgXBQayaq3ivBo3r0lwvtBTxCMsz99tHMAiHFccrjmXprjx93t_ATsY-yuMkUTpNMIRIxeVFkxFUFmAql9lncFTKYQ3c3kAFLliTjeiMd24XROH9vV98/s1600/dock-bg2.gif);<br /> padding-left: 20px;<br /> }<br /> a.dock-item {<br /> display: block;<br /> width: 40px;<br /> color: #000;<br /> position: absolute;<br /> top: 0px;<br /> text-align: center;<br /> text-decoration: none;<br /> font: bold 12px Arial, Helvetica, sans-serif;<br /> }<br /> .dock-item img {<br /> border: none; <br /> margin: 5px 10px 0px; <br /> width: 100%; <br /> }<br /> .dock-item span {<br /> display: none; <br /> padding-left: 20px;<br /> }<br />
dan simpan script berikut diatas kode </head>

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

Selanjutnya simpan script berikut diatas kode </body>

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

Cara pemanggilannya pada Html :

<div class="dock" id="dock"><br /> <div class="dock-container"><br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtmKgQtFnLIrMPW6WPn9GbU1_Jsch0ZNuJMiDrVb8MZQM4J3fNiDzqU8FJbU-U1BrUj05sPS3SInilLkfY6NYg-nJZhJHhTHmTFXEcWqMyH0uJ9XxdiEUryGEMKWHfFaKAS2AhceOs9XY/s1600/home.png" alt="home" /><span>Home</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXroGfSM3IlIFYcOEqBBTmd4f4esejNIonI4i1muUCRpKvh2K0fotQK-tNEivGeBch58dB1fRj9hGPFp0DawW_2TIMiR3yvWialSk1dg8v2ZoiaVR1fYjasXewTQSpUqmDzSE9hMksa7Q/s1600/email.png" alt="contact" /><span>Contact</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtd8o1DF_4LcPyseO7QYRxuT_GdU9BLdDyYaTHD9mfQWgWF0fXUlEYsg8haFajYmm5dR3jjopUGrJ1oA1j4Q6Yd03TGSevCRy1xvyjfTdQt5oqyd-zlRUbtEa0R4woXYUuVQAbTYfb350/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsGZZltVcCOONwH6MLZywUbgZqHYq6m_PGb4oUaP7mw5nY0EEkqTmMUSqnf85jpt6qf7GFTZYymqEMcOPZf0wlkuEH51JZj_fKBreO5CnDXrJ36WKD9nxUAupbN4gmPKHABx7GRas158/s1600/music.png" alt="music" /><span>Music</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWY7G5gQdOko6Ubi7zh3PAx1O9sAjLxsKhLWHAjryTXr7tp_FjuzY-EEBymU0nx02db_IKCTZ6Z5swFF6sdJBKFvMFSEgpOsbpXEnfDfpYO4P9XGQr4qcr9rKQUbaEzedxkuMXzmIDUM/s1600/video.png" alt="video" /><span>Video</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfcfzY5K68wF3NYCis4u3Jv0letVb3eAB6e3pXUIQA_7ldP0xrgoZ5TJ0me4B3xoSy1FteMV1mzeF4BW6TudtocidG9scx5thCmXkW_mion960recfUrBxOWhrgFLMUuxK3istmIgwnZM/s1600/history.png" alt="history" /><span>History</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbfWD9MJtQSi8mngiJVhkIGbmSYiOmy79IhtmbRCgvFs_6Zboq96GiHofw_QKA3UBQcxnU5gp1gt85thqD9RvOpged3ZTOu4ahPUMpamLVf1Mw7Xf1GhOfyoxzd7FEIkoQie9ZE0QjmU/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0suyR62_tyid0d2feQpwwhxZI1dn0uz3PaGCsHMiwMdtytCQj6b7S8ZRu8BCTthi3WtSWzwR0Xw9dJ2TB3dNyMqZgaHXq00eOWkxGKQOTjK4kAWAcdEna-eaNnZtK84cFIOCVmw71DQ/s1600/rss.png" alt="rss" /><span>RSS</span></a> <br /> <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvONWCMHF-0_QoSW88NeWmy8MDy9B3psnjavBFvu6ghyphenhyphenN92aNl_z8v1BHFuwvP-cdVZGat_U01mZHB9kJN7duwOoS1O0R9P1ed3euJ_NIDT_tfdoE0dQc-ra8thNTnrOi1DgWkFe2LGJA/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a> <br /> </div><br /> </div>

Selesai... semoga bermanfaat,, dan semoga kawan bisa membuatnya kembali lebih bagus dari ini,, menjadi pengembangan nya yang lebih baik,,,
Happy Blogging.....