Minggu, 17 Juni 2012

Cara Membuat Menu Horizontal Drop Down Dengan CSS3


By on 22.04

Blazer Blog, CSS - Kali ini saya akan membahas bagaimana cara membuat Menu Horizontal Drop Down Dengan CSS3 menu drop down kali ini tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya tidak ribet cukup satu langkah langsung jadi. Baiklah bagi sobat yang pingin membuat menu CSS3 ini ikuti langkah-langkah di bawah ini:

Cara Membuat 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML JavaScript.


3. Dan copy kode di bawah ini.
<style>
#css3pic{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3wrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#css3bar{width:100%}
#css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#css3bar a.trigger{padding:8px 13px 8px 9px}
#css3bar li{float:left;position:static;width:auto}
#css3bar li ul,#css3bar ul li{width:140px}
#css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;}
#css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
#css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block}
#css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0}
#css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none}

</style>
<div id='css3pic'>
<div id='css3wrapper'>
<ul id='css3bar'>
<li><a href='#'>Home</a></li>
<li><a class='trigger' href='#'>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Tips Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Widget</a></li>
<li class='hr'/>
<li><a href='#'>CSS</a></li>
<li class='hr'/>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Lifestyle</a>
<ul>
<li><a href='#'>Health</a></li>
<li class='hr'/>
<li><a href='#'>Travel</a></li>
<li class='hr'/>
<li><a href='#'>Food</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Web</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
</ul>
<li><a class='trigger' href='#'>Technology</a>
<ul>
<li><a href='#'>Handphone</a></li>
<li class='hr'/>
<li><a href='#'>Gadget</a></li>
<li class='hr'/>
<li><a href='#'>Computer</a></li>
</ul>
<li><a class='trigger' href='#'>Sports</a>
<ul>
<li><a href='#'>Tennis</a></li>
<li class='hr'/>
<li><a href='#'>Moto GP</a></li>
<li class='hr'/>
<li><a href='#'>Bulu Tangkis</a></li>
</ul>
<li><div id='coom'><a class='trigger' href='#'>Community</a></div></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Ganti kode yang berwarna biru (width atau lebar) sesuaikan dengan blog anda.
Ganti tanda # dengan URL yang dituju saat di klik.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

7 komentar:

  1. sungguh bermanfaat.. terimakasih

    BalasHapus
  2. ini dia yang selama ini saya cari cari. makasih ya kawan, kamu baiiiiiiiiiiiiiiiiiiiiiik deh!!.

    BalasHapus
  3. Mas, kok di blog saya submenunya ketutup postingan, jadi g bisa keluar deh. minta solusinya mas.terimakasih

    BalasHapus
  4. thanks gan,,
    nice share sangat bermanfaat . .

    BalasHapus
  5. mau tanya donk Dasar CSS untuk buat dropdown itu apa yha..apakah harus di tambah dengan hover,position,float ataukah yg lainnya..soalnya saya cuman butuh dropdownnya saja..jadi tampilan menunya tetep seperti yg ada di blog saya,,saya hanya ingin menambah dropdown saja tolong di bantu yha..nie saya mau buat menu dropdown.. ..

    BalasHapus
  6. Aduh mas saya tidak bisa kasih tau karena ga bisa nulis HTML Code di Kotak Komentar jadi kirim lewat e-mail saja ya. Saya akan jelaskan.

    BalasHapus
  7. iyha bro nie email saya,,, cnambiexz@yahoo.com
    tolong yha bro...

    BalasHapus