Home » » Menu Navigasi CSS Mac Dock Top With JQuery

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://lh6.googleusercontent.com/-yDiEKIe1uvE/TYk7YS7rnJI/AAAAAAAAAaM/gfG2vdjgTS4/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://lh5.googleusercontent.com/-Tzvk7gEQayM/TYk7hMbzrBI/AAAAAAAAAaY/AKv8REtJ2Bo/s1600/home.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="#"><img src="https://lh4.googleusercontent.com/-RW1CNT_pjaY/TYk7bcwN9QI/AAAAAAAAAaQ/vS59D1M5euI/s1600/email.png" alt="contact" /><span>Contact</span></a>
  <a class="dock-item" href="#"><img src="https://lh4.googleusercontent.com/-wPaS5JWh1hM/TYk7pWPBenI/AAAAAAAAAao/B9yKqG2NaA0/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-ZyW9SH0hcY0/TYk7n6DktqI/AAAAAAAAAak/T1B6jxb7Cgo/s1600/music.png" alt="music" /><span>Music</span></a>
  <a class="dock-item" href="#"><img src="https://lh6.googleusercontent.com/-uYoefPPwTQE/TYk7xytlqNI/AAAAAAAAAa0/ep3940GHq8c/s1600/video.png" alt="video" /><span>Video</span></a>
  <a class="dock-item" href="#"><img src="https://lh6.googleusercontent.com/-bwKSU_xFjIc/TYk7ewTZ9bI/AAAAAAAAAaU/yyOGMdInqfk/s1600/history.png" alt="history" /><span>History</span></a>
  <a class="dock-item" href="#"><img src="https://lh3.googleusercontent.com/-cBGBsQkJ54I/TYk7UK9B-QI/AAAAAAAAAaE/qWc3jO0NVC8/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
  <a class="dock-item" href="#"><img src="https://lh3.googleusercontent.com/-UovHAEdtbqA/TYk7rLHFe0I/AAAAAAAAAas/pjKjOKCE8Wk/s1600/rss.png" alt="rss" /><span>RSS</span></a>
  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-igrXkJUyY_E/TYk7uSY6uRI/AAAAAAAAAaw/5VPf85w8vjE/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

11. Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .