Cara buat menu drop down bubble ~ Tutorial Blogger

Rabu, 03 Agustus 2011

Cara buat menu drop down bubble

Rabu, 03 Agustus 2011 | 05.32

Noer Cholis

10 comments

Koleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble yaitu efek hover yang timbul berbentuk bubble atau seperti gelembung, dan bubble yang muncul sekaligus sebagai area sub menu yang muncul bersamaan dengan bubble tersebut.
Yang jelas menu ini akan membuat web atau blog anda tampil lebih mantab.

Silahkan langsung saja anda LIHAT DEMO

Bila anda berminat memasang menu drop down bubble ini, silahkan ikuti langkah - langkah dibawah ini. Tapi ingat, gadget ini juga menggunakan jQuery ya.... :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

</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>

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://lh3.googleusercontent.com/-yxMOEKhbHiM/Tjk0kwyiifI/AAAAAAAAA7U/uA6jGZ29YyU/s104/Bubble%2Bhome.png) no-repeat 0px 0px;
}
.menu-2 a.icon{
    background:transparent url(https://lh3.googleusercontent.com/-bTMfKbxf_JQ/Tjk0lGhZwmI/AAAAAAAAA7c/MJ-1FwLYPBw/s104/bubble%2Buser.png) no-repeat 0px 0px;
}
.menu-3 a.icon{
    background:transparent url(https://lh4.googleusercontent.com/-NQC72i3TkFo/Tjk0lMJiCaI/AAAAAAAAA7Y/sOWiYmgCcpQ/s104/bubble%2Bshop.png) no-repeat 0px 0px;
}
.menu-4 a.icon{
    background:transparent url(https://lh6.googleusercontent.com/-sTaW0uPlv_I/Tjk0kMtUYRI/AAAAAAAAA7M/cJpu3Om4Qxc/s104/bubble%2Bcamera.png) no-repeat 0px 0px;
}
.menu-5 a.icon{
    background:transparent url(https://lh6.googleusercontent.com/-a1DHufauo-Y/Tjk0kq--K1I/AAAAAAAAA7Q/AF5f-G4nOcU/s104/bubble%2Bfav.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>

Catatan :

Bila menu tidak bekerja dengan baik, silahkan anda coba hilangkan kode javascript jQuery seperti berikut :

Biasanya pada template sudah terdapat kode javascript jQuery yang sama.

6. Simpan Template

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget yang ada dibawah header, ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="BubbleNavigation">
<div class="content">
<div class="navigation" id="nav">

<div class="item menu-1">
<img src="https://lh5.googleusercontent.com/-1nYVgKq7UK4/Tjk0i9BQjVI/AAAAAAAAA64/MQS8zAN5wqw/s104/Bubble%2B1.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://lh5.googleusercontent.com/-lbt4a4KQMZU/Tjk0jD27LsI/AAAAAAAAA68/eCyEY0sfrMA/s104/Bubble%2B2.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://lh5.googleusercontent.com/-VVZg9JJhQkU/Tjk0jTpep_I/AAAAAAAAA7A/ChIxagOJkqU/s104/Bubble%2B3.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://lh5.googleusercontent.com/-PLxqcbkkeh0/Tjk0jqjxRAI/AAAAAAAAA7E/UqBscqMAiKY/s104/Bubble%2B4.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://lh4.googleusercontent.com/-Fktn7u6q6oU/Tjk0jzlz1CI/AAAAAAAAA7I/5AvSmMDpTUA/s104/Bubble%2B5.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>

Catatam :

Silahkan anda ganti Teks berwarna MERAH diatas.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free

Related Articles :
Baca artikel lain :
Informasi Artikel :

Judul : "Cara buat menu drop down bubble"
Diulas Oleh : Noer Cholis | Rabu, 03 Agustus 2011 | 05.32
Description : Koleksi baru lagi cara buat menu drop down , dan menu ini memiliki tampilan yang berbeda dengan me...
Label : css,JavaScript,jQuery,menu,menu drop down
Posisi Rich Snippets : Rating: 3.4

Sampai saat ini baru ada : 10komentar

>>> Silahkan tambahkan komentar Anda...

10 komentar:

Rian Priyadi5 Januari 2012 23.55
thanks. kunjungan balik ya n tukaran yuk
BalasHapus
agilcr8 Maret 2012 07.39
KEREN ,,,,,,,,??
tq ats infrmsi na..
BalasHapus
Noer Cholis8 Maret 2012 10.05
agilcr... sama-sama
BalasHapus
kang opick8 Maret 2012 10.09
saya selalu mengikuti tutorial blog. terima aksih atas tutornya yang sangat bermanfaat buat saya. semoga Tuhan membalas semua kebaikannya.dan saya izin copy codenya. terima kasih
BalasHapus
Noer Cholis8 Maret 2012 10.25
kang opick... amiiin...
BalasHapus
Comunity I Dooa13 April 2012 09.43
kak Klo turunin menu itu gmn kak
apa height nya ?
tp yg mn yg di ubah...
soalnya yg aQ pake kok tempatnya di paling atas harusnya d tengah gitu kak....
pleaseee bantuin kak......
BalasHapus
Balasan
dwi mubarok26 Juni 2012 08.41
mas, cara bikin kotak ber.scroll itu gimana (langkah nomor5 yg buat naruh script)
saya uda coba bikin tapi sisi2nya ga ada garis pembatas, cuma ada scrollnya doang,
BalasHapus
Balasan
M Nur Ali Said, SAg2 September 2012 18.22
salam kenal mas mg sukses selalu. sangat berguna. thanks
BalasHapus