Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Simple Menu Drop Down CSS3 Black Editions

Menu Drop Down CSS3 Black Editions
Simple Menu Drop Down CSS3 Black Editions – ini merupakan menu drop down dengan sudut rounded cerners atau bisa dikatakan setengah lingkaran. Menu Drop Down CSS3 Black Editions ini memang sangat simple dan tidak banyak menggunakan warna, mungkin hanya bisa serasi dengan template yang berwarna gelap saja.
Namun apabila ingin menggunakan warna lain silahkan bisa dicoba sendiri dengan mengubah warna pada kode CSS yang ada dibawah. Kode CSS menu drop down ini masih menggunakan warna default yang tertera seperti pada gambar diatas/diawal posting. Warna background dan warna hpver silahkan sesuaikan dengan yang di inginkan jika anda ingin menggunakan warna lain saat akan dipasang pada blog anda. Untuk cara pemasangannya kedalam blog, berikut adalah tutorial cara memasang Simple Menu Drop Down CSS3 Black Editions pada blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
Menu Drop Down CSS3 Black Editions
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
background: -webkit-linear-gradient(#444, #111);  
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #fafafa;
}

#menu li:hover > ul{
display: block;
}

#menu ul{
list-style: none;
margin: 0;
padding: 0;  
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;  
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);  
background: -o-linear-gradient(#444, #111);  
background: -ms-linear-gradient(#444, #111);  
background: linear-gradient(#444, #111);  
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{ 
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;  
}

#menu ul a{  
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec,  #0186ba);  
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec,  #0186ba);
background: -o-linear-gradient(#04acec,  #0186ba);
background: -ms-linear-gradient(#04acec,  #0186ba);
background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Simple Menu Drop Down CSS3 Black Editions di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Keterangan:
Silahkan ubah tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara membuat Simple Menu Drop Down CSS3 Black Editions di blog.

Berlangganan artikel via email

11 Response to "Simple Menu Drop Down CSS3 Black Editions"

Wah kerenni, menunya nanti saya coba di blog saya (izin)

Balas

keren mas , terus berkarya.. ^^

Balas

tutorialnya keren2 mas :D

Balas

kemaren yang blue, sekarang yang black mas andes,,... ijin save ilmunya... jangan lupa mampir di lapak ane ya mas

Balas

itu yg seperti pd blog mastergomaster atau bukan mas ?? :)

Balas

jos, keren mmas andes menunya. thanks tutorialnya sangat bermanfaat. salam kenal dan salam blogger, sukses terus mas

Balas

wajib d coba nih bang...mantap dehh heheh :D

Balas

Gan ane submenunya kok gak keluar ya ?

Balas
avatar
Anonymous

nah ini dia yang saya cari2, saya coba praktekkan ya sob, makasih. :)

Balas

Saya cari di menu tataletak blog saya tapi tidak ada menu tambah widgetnya, tolong dibantu yaaaa... gw newbee banget niiihhhh

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Simple Menu Drop Down CSS3 Black Editions" ini bermanfaat, share ke jejaring sosial.
Konversi Kode