Menu Navigasi CSS Mac Dock Top With JQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi CSS Mac  Dock top 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/AVvXsEgxq86k_DDFvMTAvBSmO8VqAmxgng2weCscAMkQHzKLLz_U00dFUuVHn0dWpY_DBs-M0O7RjHHLxtSWHTPR5FEvpYkZz4Z0jZOy_10AXP6e6ZHEniTAzV4wJG5xFqbZ32vGMz_iA-QN2QQ/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;
}

8. 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>

9. 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>

10. Cara penggunaan 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/AVvXsEi0EjXxD_EHbzl_AwAL_LSKyVMYqbFyvWzc8zRFyFdqjeiAQlW0dJfa0j3tDLR9zfcObO7neX0lTxbOJ4VVYsW5XZF9BWe8B1QDgAFVVPKpYg-kkzdF0rWP59BzAAHrO5b1JDr1MuYxzKI/s1600/home.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW73RdREt4UcwaFetBoVKM-FIqHa7r6dxpKm8-ChJcqBeupZ72LIVEKW1W9wKTwCwZzPYIpJsrFUmo0aTPGtj5yY_kJbT7_BP0wqNftjw2GmiTqW91dTdb6lAv4eY4Zrm71QejnwppoJs/s1600/email.png" alt="contact" /><span>Contact</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZrJqwHJUwi30Nm9vZURJNGptLCIiP4UfjiDR3oHxqSP8LqxRpg49LfwZy3Hqj6d86HPnCi2zUWFCu0r-hymiV29FOgQpqLCEa7wLIbHkbaEiPuECDz_doXSTkjqQiMEbcV6XUMZ5drA/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5wmTRedLm-T5H6Y4r_8ah4y4Qc2hx80z34kuftVC-Uz_sIEWD4IMB14ijuYzWfm70qoFhOy82bnKqD4dt6Qs8Ya6rsEeRRDOWzpDj2FAA2q0w8ji7rHIv0C-bEL7Cg5yNODOO_qpSx0/s1600/music.png" alt="music" /><span>Music</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipmkQyW80_JhDvrIY-H61bsuYjzz8pgZ5QipPyHtcfquGsdq2Y4DYRiE-YqF7qMWT6eOaqeniRIUbJtgpNU6t7NhNsiA7xl98gK2j8MEZtthaGzXSQ1s6tbydDfj5ky3EjSxkgF8VRCQ/s1600/video.png" alt="video" /><span>Video</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1XJQjcIN5mHr8cx0HJIRX5ZJUmG7EdusiT4gU7sdiBw3dVydwp-Sp6Ps_GsXIOAag6i4312THXXb0h3HkyIp5GtFKsbC71-0io5uq5bAh-p2jHx1TRaj67KceShG95HrStLBW4Ep-OE/s1600/history.png" alt="history" /><span>History</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cFrWR1ugHhrgmaeza91-oOJj9RCSn9-IWWyKlK5zrd7SbsCJwG4Mn-lZ1R9zz7XtVrs_Fb4CcqGeJm8wuqCU73ZKBVZClHMYH4FYV23rHzjsYJjlk_IvPcNwESnrZ0Qtp9mPIwkSF-w/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja68uZfDlj3dIUZs5yoXFgKQQUfTivto-H898RL7Ako36GU5vRWeeCp8qgOgdL63UmZFBmung-Yx-WyjAroZQU7DUnrZ2b3VaH2QT_kj3iZ1UoBK7O3WpS9jLl1CRbm3Lydb5n3sdjHfI/s1600/rss.png" alt="rss" /><span>RSS</span></a>
  <a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQOyXRiiVUzJJE9e_0guzWGd1aSovrVCd_1iDIjxnuh1WRnhJjqXKBP3AWetqloA_WLEMJXYFNb4rNFnVccCT1hIAmEvlgX8JibzjlEbZktmhqq01fNIf-4aQmu1ki7H0wJCI6H8NVSM/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

11. Save

Related Post