Sabtu, 14 April 2012

Cara Membuat Menu Drop Down Dengan CSS3


By on 07.00

Cara Membuat Menu Drop Down Dengan CSS3 - Kali ini saya akan membahas bagai mana cara membuat Drop Down Menu dengan CSS3, banyak orang yang pingin mendesai Blog nya dengan Menu Drop Down yang keren dan bagus,nah ini kesempatan baik bagi para blogger untuk memasang menu Drop Down ini yang menggunakan CSS3 ini di blog kamu, cara nya membuat nya sangat mudah, dan tidak ribet, dan jika kamu pernah melihat artikel Cara Membuat Menu Horizontal Drop Down di bog ini, dan mengalami kesulitan atau kegagalan coba sekarang gunakan Menu Drop Down CSS3 yang satu ini.

Silahkan Lihat Dulu Demo Nya : DEMO

Berikut Cara Membuat Menu Drop Down Dengan CSS3 :

1. Add Gadget > HTML Java Script, copy kode di bawah ini.

<style>
/*------ CSS3 Drop Down Menu By www.blazerracing.blogspot.com ---------*/
#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;
line-height: 0;
}
#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;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#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-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#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: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#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;
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 ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
NB : Ganti tanda # dengan URL yang di tuju.
         Jika kamu mau menambah menu Drop Downya tinggal tambah kode di bawah ini

<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>

Sehingga jika disatukan dengan yang di atas menjadi kaya gini

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>
</ul>

Sekian Penjelasan Dari saya semoga dengan Drop Down Menu ini tampilan blog kamu lebih keren.

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.

17 komentar:

  1. Menuju TKP gan

    BalasHapus
  2. simpel banget ya gan...

    BalasHapus
  3. thanks banget gan. udah ketemu sama ini yg paling pas...

    BalasHapus
  4. Masa gan tidak terbuka, setelah saya coba terbuka, copy kode nya saja yang pakai bloquote. Untuk mengetesnya silahkan kunjungi situs http://editor.mybloggertricks.com/ lalu copy kode nya dan klik preview

    BalasHapus
  5. sama neh ...sub menu nya kagak keluar....

    BalasHapus
  6. ini menu buatan agan sendiri ya?

    didalam kodenya ada by www.blazerracing.blogspot.com

    BalasHapus
  7. ini baru keren.. bagi terus ilmunya...

    BalasHapus
  8. gk bisa buka drop down nya gan.... siaall

    BalasHapus
  9. like my blogz please..
    http://www.anime-blogz.co.cc/

    BalasHapus
  10. sips deh gan.
    dari kemarin nyari baru nemuin nih. thanx banget gan.
    tapi ane mau tanya, kalau ngecilin lebar dari sub menunya gimana caranya gan?
    soalnya ni panjang banget.

    BalasHapus
  11. thank's gan...ini die yg ane cari2...bagi terus ilmunya ya.

    BalasHapus
  12. makasih sob sharing nya, tapi kok submenu nya gk kebawah ya? biar sub menu nya kebawah gimana sob? biar gak nutupin menu utama di sebelahya. makasih sob

    BalasHapus
  13. gan mau nanya kalo mau panjangin lagi harus ganti yg mana ya?

    BalasHapus