Senin, Juni 21, 2010

Cara membuat menu navigasi horisontal dropdown dengan script css (massive blue drop down)

Salahsatu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown (massive blue drop down). Seperti gambar di bawah ini:


Beberapa menu dropdown lainnya bisa dilihat disini:
1. Simple dropdown
2. Dropdown 2 level
3. Dropdown sunrise

Menu navigasi di atas sangat sederhana dengan background warna hitam dan saat disorot mouse akan berwarna biru.

Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut:



1. Login ke akun blogger
Pilih Dashboard - Tata letak (Rancangan) - Edit HTML

menu horisontalcari kode berikut:

cari kode berikut:

]]></b:skin>


2. Di bagian atas kode tersebut masukkan kode berikut


menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

3. Simpan template
4. Pada gadget html/javascript, masukkan kode berikut:

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>


catatan:
Ganti tanda # pada href="#" dengan url target
Ganti Home, Tutorial, ... dengan teks yang akan ditampilkan di menu navigasi

Contoh blog yang memakai menu navigasi massive blue bisa dilihat disini menu navigasi





Artikel Terkait :



14 komentar:

bensap mengatakan...

Bos Aku dah tambah menunya tpi bawaan temlate kok gak bisa hilang misak BERANDA

visit : bensap.co.cc

Holan mengatakan...

aku udah coba langkah2 dari blog ini,api kok ga bisa ya.
aku bingung dengan perintah yang terakhir..

catatan:
Ganti tanda # pada href="#" dengan url target


pertanyaan?
url target yang mana ya?
toong bantuin ya mas, soalnya masih pemula

Artikel Komputer mengatakan...

url target yang saya maksud di atas adalah url halaman yang akan dibuka saat menu di klik, url target bisa dilihat di adress bar browser saat halaman dibuka, contoh
http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-menu-navigasi-horisontal.html
atau
http://artikelkomputerku.blogspot.com
Di postingan berikut saya pernah bahas tentang url target , mungkin bisa dilihat panduan bergambar tertang url target disini
Membuat menu navigasi (horizontal) sederhana

Mario mengatakan...

mantap gan, berhasil di blok aq
tenkyu...^_^

Mario mengatakan...

tapi kok gk bisa di klik, mas.
di menu na mw tpi sub menu na kdang mw kdang gk tp sering gk mw.
gimana tu, tolong mas solusi na???

Lematang Freedom mengatakan...

makasih bro .. nice info

Darmanto mengatakan...

Bos saya sudah nyoba,tapi kok ngga bisa,terutama bagian sub menunya...?mohon solusinya.

anak kampung mengatakan...

Gan.... drop down'y ko g fungsi yaa.. itu gmna...??? mohon penjelasan'y...
maklum gan pemula.... trims

ItsMe mengatakan...

Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
www.designedmenus-d.blogspot.com

Aslam mengatakan...

mas...
punya saya kok gk ad menu drop downnnya?.?.?

ukifahlevy mengatakan...

thx u pak, cukup bermanfaat dan 100 % bisa...!! http://qaryatulhuda.blogspot.com

Misbah Muneer mengatakan...

,terimakasih bang buat artikelnya . . .membantu banget.
kalo mau nambahin efek scroll/fade waktu mouse di dekatkan menu gimana caranya bang . . ???
mohon bantuannya , aku blogger pemula . . .

^^

colokan internet mengatakan...

Terima kasih infonya gan, saya dah bisa pake navcontainernya buat tugas sekolah. Kapan2 mampir ke blog kita ya :D

H. Agus Nugroho, S.H mengatakan...

Gan klo mnambah menunya gmna ya supaya bnyak, soaly pny sya smpe 8tab menu...