ash demo: Cara membuat menu horisontal bubble pada blog

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/AVvXsEhNM5xR8GG5bmzdFxWocEN1obym8G4JJxKIB8xdk2YSf9WRj1OHUhWf5qNKJj9Nio0cTJ3lmDC7y0q2R_uayZ7r2F-cs9rOyQKcx6FhFve2ABZHG-hiQzBX8NgH-xAt_1bW_1hBQVuXiEVG/s104/Bubble+home.png) no-repeat 0px 0px;
}
.menu-2 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhZAcNLHCoUCiqgjl7GzlPK3dZyhBP62PqylxhEYNXCBE2QQsxH08MdyJEQDGpt4blL1eDccsmjmjTV9Lkrs18DXZkVTfna0-ELYrR5Gtomz4LR03E0y7RXacBtN3S9Di7nbmCQ2eARNd/s104/bubble+user.png) no-repeat 0px 0px;
}
.menu-3 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtbhe76torMMpKU3La0_r2erGqYJYusSKoRCY-AjtpZemGyoG-ClPs9n6sSRRHihHZ418wjR3tr2212Xw3NrWy6oYsJS928UEVDVzpNfs6rqFnwDJ7YUFyZcgfvqeo9b1BLT1wSZbdkd-/s104/bubble+shop.png) no-repeat 0px 0px;
}
.menu-4 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Vyla9RQu04JYMmAxULDzHYigR_koGalL6SbItQBCAOJJWwLi3ieZ9S0-dbjTrixCgN-st13MSh76j1P1R_m91ScBaDfAtur4g5V8hQYeWJKKKksglR-CMO7xMS8yPTWZ_ZhscQBsD0lM/s104/bubble+camera.png) no-repeat 0px 0px;
}
.menu-5 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhauH56YxqHvyjE8auwqMHvHkO-P-tiFP6Zt1ZhTUsqBjyRwuoJrXHpoxkVi9rBm8X3n_lwV7LOS8JePgofj2lG6MpEF9mN1WQk0JLHQzZI-CpxGlFsoyvL_cI6aT2JagMm5INyA6tP_Ec2/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/AVvXsEjOUEBGC9Er6k1-u7Feg5wNKvumbsEcPPki3jztCLkd2ridoHnua23VLw-XnLGNf5-7KCdmWJEShQ5ryuzE6VbDf1F_nowdTxKwI2_WfGT6v5JCBS8ALE1l39HAfoJ28ThNIEegYviyRFim/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/AVvXsEhsrvwJWOkNds0sOOUkRAYVAn_uAsWMRQxqwkIZTNvPrj6ucadUKdh_XnXb7g_h862JYDUWVNVcQZG0L6ZCyKqu4Y4gecPbZaxhhqMRYE7olQATrEBSmNDE1DUsobVP3vWTLg46k-Z0w_mu/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/AVvXsEjI_4oQCE2qK0gJHPraXwhX-YiC1hWHnSCHG6R5QkN9OyPRUdLs9wtZ-kq_H_Pf-NCqFY9asNjVJld_K7Pxl6kjrfGnaukrOhgmY5XUcyzDdOIW64CK5I2y24wOR6-ameOkNpjdVX6WGR82/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/AVvXsEj5d5MmMhEtmr5da3XK5UO0slmxoGTQs39G9fHla_kgkp78npgKfZjS6ljzp-Vwat7Z0ixbxQwFiOQczW131HShwRgcwtZLsrCk2S8TOQTMeyODEWB9_McqxsvZtl14Ipt3b0p80bzxSQeC/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/AVvXsEjThVbc6huAnANLAvax5GSnSVW5cGn_2kxwXJeAwBKah-o2utjKewf31I1BFII6c2IOlPUAyB28rG72LcKGV02-q2YmIlmDbRIPVZvGzONMj-xbzrlwDcfreD-zE29SLfy6k_qoGdnGVArl/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

Demikian cara membuat menu drop down dengan efek bubble.

semoga artikenya bermanfaat.

Labels: menus

ash demo

Monday, January 16, 2012

Cara membuat menu horisontal bubble pada blog

0 Comments:

Post a Comment

About Me

Previous Posts