Menu dropdown dengan efek bubble menarik untuk di coba.
Contoh seperti gambar di atas.
Berikut ini caranya:
1. Login blog
2. Rancangan
3. Edit html
4. Letakkan kode berikut di atas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript" src="http://tympanus.net/Tutorials/BubbleNavigation/jquery.easing.1.3.js"></script><script type="text/javascript">$(function() {$('#nav > div').hover(function () {var $this = $(this);$this.find('img').stop().animate({'width' :'199px','height' :'199px','top' :'-25px','left' :'-25px','opacity' :'1.0'},500,'easeOutBack',function(){$(this).parent().find('ul').fadeIn(700);});$this.find('a:first,h2').addClass('active');},function () {var $this = $(this);$this.find('ul').fadeOut(500);$this.find('img').stop().animate({'width' :'52px','height' :'52px','top' :'0px','left' :'0px','opacity' :'0.1'},5000,'easeOutBack');$this.find('a:first,h2').removeClass('active');});});</script><style>.BubbleNavigation{width:950px;height:70px;border:2px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:1px 1px 4px #666;-webkit-box-shadow:1px 1px 4px #666;box-shadow:1px 1px 4px #666;margin:0px auto;padding:5px;}.content{width:100%;height:50px;background-color:#ccc;opacity:0.7;margin:0px auto;}.navigation{margin: 0px auto;font-family: "Trebuchet MS", sans-serif;font-size: 24px;font-style: normal;font-weight: bold;letter-spacing: 1.4px;}.navigation .item{position:absolute;}.menu-1{top:30px;left:50px;}.menu-2{top:30px;left:225px;}.menu-3{top:30px;left:425px;}.menu-4{top:30px;left:620px;}.menu-5{top:30px;left:815px;}a.icon{width:52px;height:52px;position:absolute;top:0px;left:0px;cursor:pointer;}.menu-1 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggK-UUdscRkI1_nwbLKVpia7gBttAlIVFYZJqeIklpfC6ft65siAqDYSG6WuUR3ALPeLl-sygoszrmbSkkZnHKbVzj6NZUtdgbaJpnp2iiM5lZ0faOWOtuVctn3evJGE48p6k6uQKoWmDr/s104/Bubble+home.png) no-repeat 0px 0px;}.menu-2 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8igAi_h57Vn4Rcz2j0Za9PvlgVddiu4FG7j_Xp67ayQQlo3Qe8vGcjhe88Zp0wt084bYT-1ytUfyGJPwzrx9G-yzq8ml3A72CW8uiwQi4OWfe9cWdswuaqh25Cp_M-Y7rex6ap5UcE5rM/s104/bubble+user.png) no-repeat 0px 0px;}.menu-3 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyoUUXXM9cK6X3MTY_yrZIJG-Vyx_Q7OoM6WnLbF7xpIUBvhz0ewf1a3DxqFXdttiyLTgUdJHbHGGGgqjGB8uT2ruqz2FszGnlZugPBlAUbelWoV4MZJUgeAoMTVe4sDzKTvoip85H1aKl/s104/bubble+shop.png) no-repeat 0px 0px;}.menu-4 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrY1zZZz-iOaf6ZyKLjfxEAS2C-hnBJnfQ1xM6QBfcneMQc1PBO9EJwggV4QAQJcWXyEEUOL3DkzQNF6fFoR2IkWXy6uyNhC5jrw1PlKEep4DSW9-8rI43Y5B5CmA_MJhIM8pjkBBbVLdo/s104/bubble+camera.png) no-repeat 0px 0px;}.menu-5 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFh2kdtxRfVs9kpFWX6OOQ3sx3IF81aoIe9f2KXuaEOUI7xrx1OVOwll48ZkmPnu7pt1AKFJrnrtIQibJOEB3-yNTaiEKuOAJzJfZRSjAwkCyoSC0X1z5lb50_oDjXo1zTs45KcQIAt9g5/s104/bubble+fav.png) no-repeat 0px 0px;}.navigation .item a.active{background-position:0px -52px;}.item img.circle{position:absolute;top:0px;left:0px;width:52px;height:52px;}.item h2{position:absolute;width:px;height:25px;background-color:#ccc;border:1px solid #ccc;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;color:#222;font-size:18px;top:0px;left:60px;padding:5px 10px 5px;text-shadow:1px 1px 1px #fff;text-transform:uppercase;}.item h2.active{color:#fff;text-shadow:1px 0px 1px #555;}.item ul{list-style:none;position:absolute;top:45px;left:0px;display:none;}.item ul li a{font-size:15px;text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;color:#222;padding:3px;float:left;clear:both;width:px;text-shadow:1px 1px 1px #fff;}.item ul li a:hover{background-color:#fff;color:#444;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:1px 1px 4px #666;-webkit-box-shadow:1px 1px 4px #666;box-shadow:1px 1px 4px #666;}</style>
5. Simpan template
Selanjutnya:
1. Rancangan
2. Add gadget html/javascript
3. Copy dan paste kode berikut
<div class="BubbleNavigation"><div class="content"><div class="navigation" id="nav"><div class="item menu-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYD7YOJ6jWcj6uY6J3Tkb3ZvXqkTubwIqFDOdd5Hva8p-qsdRulpGc8gZhOpjdlbWBcBzFvUOzJOMwUxqNnTa9LeDw_KCXKRtS0Umkk2DMMtil7P0zarxoNJXwBVsyR3dmCSbvj1KGjqx/s104/Bubble+1.png" alt="" width="199" height="199" class="circle"/><a href="ULR HALAMAN / ARTIKEL" class="icon"></a><h2>Home</h2><ul><li><a href="ULR HALAMAN / ARTIKEL">Portfolio</a></li><li><a href="ULR HALAMAN / ARTIKEL">Services</a></li><li><a href="ULR HALAMAN / ARTIKEL">Contact</a></li></ul></div><div class="item menu-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9KMQMC2LMVkipmErhnRxPomP2ovSJLqxNq881KyWmPs6OeltOVv98F5_CyqFKNSKR2duEcoKcsFxtejxyQElrLuBdHTTDqJDeudQiIU4p9fPkmocH8vuXrC-hwP0A3DgqnM26tHiDiFXv/s104/Bubble+2.png" alt="" width="199" height="199" class="circle"/><a href="ULR HALAMAN / ARTIKEL" class="icon"></a><h2>About</h2><ul><li><a href="ULR HALAMAN / ARTIKEL">Profile</a></li><li><a href="ULR HALAMAN / ARTIKEL">Properties</a></li><li><a href="ULR HALAMAN / ARTIKEL">Privacy</a></li></ul></div><div class="item menu-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXta8P1A3YcwuZcrGy4Vi6wOClygMuwbGMz-Uwzh2VFmfWLVZP1v3JXNNAWHAeCRfLVkgEwUM4rztMOzmRrQ_36ke41ZkCH7MCE_FbJFmBSrFtF2kLTGpmr1rvzBqmRPcmnmgZN6DkLTr/s104/Bubble+3.png" alt="" width="199" height="199" class="circle"/><a href="ULR HALAMAN / ARTIKEL" class="icon"></a><h2>Shop</h2><ul><li><a href="ULR HALAMAN / ARTIKEL">Harga</a></li><li><a href="ULR HALAMAN / ARTIKEL">Katalog</a></li><li><a href="ULR HALAMAN / ARTIKEL">Order</a></li></ul></div><div class="item menu-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjIRp3n7_iozNGsNMOt8eSYAk2aBUu3mRujLWVGuhFLjDJju8ys1_gP1wmIRwVjAEKnU2WnnUO3Afhe0FBn-m5rxpWlqKm7DqWr7TPUxzh9Vz_qTACCLNeoG2plm0kb4YluKHJe3AhRH4A/s104/Bubble+4.png" alt="" width="199" height="199" class="circle"/><a href="ULR HALAMAN / ARTIKEL" class="icon"></a><h2>Album</h2><ul><li><a href="ULR HALAMAN / ARTIKEL">Terbaru</a></li><li><a href="ULR HALAMAN / ARTIKEL">Work Shop</a></li><li><a href="ULR HALAMAN / ARTIKEL">Trend</a></li></ul></div><div class="item menu-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTdVUaLuxiZayGerZHQy1BGQnjdbHhyphenhyphenHv8w_uNu-9ms-SXqRVx1urK8mlPxGHdhOUVfh5Pa66lV6vvUW9qNsV3nnxm5wgv8HxHWFssjiHnL1gF-BAev0mb18C5XcADYfG5ym-pOxW1q1Ly/s104/Bubble+5.png" alt="" width="199" height="199" class="circle"/><a href="ULR HALAMAN / ARTIKEL" class="icon"></a><h2>Kontak</h2><ul><li><a href="ULR HALAMAN / ARTIKEL">Service</a></li><li><a href="ULR HALAMAN / ARTIKEL">Support</a></li><li><a href="ULR HALAMAN / ARTIKEL">Comments</a></li></ul></div></div></div></div>
Ganti url menu sobat sesuai keinginan
Kemudian simpan
semoga artikenya bermanfaat.
Comments
Post a Comment