Menu navigasi CSS Mac Dock with jQuery

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

/* ---------------
Menu navigasi CSS Mac  Dock with jQuery
---------------------------------- */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tIWxGVoFFR09lDi_-ETsnPD2eLLboKiSbrL3UO8spImmF5k2zVFlavJIpQ_rhyphenhyphen75C1aakJo1ZziXHn_qR65WfXLMv6zNFsz_WT4wc74bP2_k1JzwgFx4Hk1cDKDKf1LENFj2uQFKGAw/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;
}

• 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>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>

• Selanjutnya simpan script berikut diatas kode </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>  

• Cara pemanggilannya pada Html :

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHwobt8wA15h4NR9pMW7Br7hNkqMAZiit7DpgiCAKKBGXHwYq4EAzuK4wbQ5UXZB9xPYRgDk-wA45Oa1CzU9rjPvU09BjPdrBrVstHwibH4PgwG500C46LHtk-Kpse9Q8aQxTQqdS8Rww/s1600/home.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qF8o9l75MI38L0o_V_qIgnLJbZdpFkUcUlslW5ODCjRN_IRjF3cGM_HIKCgH6vmGY32l5Ehr0aUxI5uQKceWWsC6JmNdqVjOoD0AsK9Ou8yP533xCdRvVmfpxzuI7OFklsJCDGPgxN0/s1600/email.png" alt="contact" /><span>Contact</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQgOJBc4mJDVCz_sN38fYnjDqj-ViUITaj_tm3vidWoxbPiOC8oY_Bz33uCX6Q4OYcWcuYHqgkjOGcXQYKZ_G9Qpv0w1DaZhZOVkoCpyfVLwBbwrQ-9szDdIBV5qVYd1-XVG2-laVbKk/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1pWCbOeSM5H_C3N77qx3Ak-DX8WnzhyfzdBzJzPJQqvGzepXKFSAvhmJuB597_abnpRohDOzZ2vIg1KmjKsPe14t-B0DIxMsCWGyMCxac5MzBGbVTkXQT8HsA9BiMU-bIw15VqcJQUc/s1600/music.png" alt="music" /><span>Music</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgDTrwgQtyc2F8-hNBbBwmvif81JHADwHcKZF2BxaaMelG5PfQtCkUFDbv0w-GflJNIT7dSmj5Gey7CVXDWxqzB4YrKumcd3N6y4IeePcCsgm6c_nIxyJddVvJcXSdCUZoDeWoL7GC5k/s1600/video.png" alt="video" /><span>Video</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTEUBh59ReihYYXmdzUwHE47gfZeYJNnIknfxUZzcydbNvyY7clPQv-X91SjdpOFH2CUMKDbu_gwNKDqWJGyqkim4BG8GlWV1lOINvrHb2VB5thsqi7p6P1lK5UpVuTlablp15_K3UwU/s1600/history.png" alt="history" /><span>History</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8K8hVDRm6xcbSouLwk7_mKLwhsHwsuXlvG6wdW-jRyNQYGvEJPERYShbU1gSmmPfdXFKWA1qB3XSdhfNieOQhSt__SBCcVpBvY91doGDA7T_RWAcZseob85Q6ar6QLDdJ-oDIqrj_Q8/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpLhRQW-igqjP2AUIL9TWTYK1jEFkxKwQuGGv6P7qOlXd7WvdKMX7ZJDi68egqjC2Cc0cCefuhM6S-N2gM2RBFOrjWVUQT-cNFjcl9sLABEydl4aQMDO7oajTKqaXX8gwGln7Eb_Z73o/s1600/rss.png" alt="rss" /><span>RSS</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgBc6M2Q1viIMbO3MmjeyDerqpdqO6FY9Cc7cPZMqkYa45omfyFXwOO1lXIAwkTffEqcgGNiNEw1oooC-Uv-KipPU0wzcYTe9h2erYiS_D4dH3szx0OP5OWJxfpR1WJ7xjNGr7ZwItzg/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

• seleai... semoga bermanfaat,, dan semoga boss bisa membuatnya kembali lebih bagus dari ini,, menjadi pengembangan nya yang lebih baik,,,