Cara Membuat Menu Horizontal Drop Down CSS3

Cara Membuat Menu Horizontal Drop Down CSS3

Bagi sobat blogger yang lagi mencari menu horizontal atau yang bisa juga disebut menu drop down mungkin ini bisa menjadi solusinya.

Kali ini saya akan share Cara Membuat Menu Horizontal Drop Down CSS3 dengan tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya juga tidak begitu sulit. Baiklah bagi sobat yang ingin membuat menu CSS3 ini ikuti langkah-langkah berikut :

1. Login ke blogger

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 sobat.

Ganti tanda # dengan URL yang dituju.

Semoga Bermanfaat