Membuat Cool Menu Drop Down Dengan CSS

Pada kesempatan kali ini saya ingin sedikit memberi tips tentang Membuat Cool Menu Drop Down Dengan CSS3, Menu navigasi yang satu ini agak sedikit membuat blog jadi cepat loading tidak telalu memakan banyak script apalagi gambar, menurut sumber aslinya menu navigasi ini 80% menggunakan script CSS, Nah bagi anda yang tertarik untuk menggunakan atau menerapkan menu ini di blog atau website anda hanya satu yang perlu anda lakukan yakni menambahkan gadget baru, tidak perlu mengotak atik atau Mengedit HTML blog..

(Untuk Memperbesar Gambar klik Gambarnya,Atau lihat DEMOnya di Blog ini)

Sekarang silahkan ikuti langkah-langkah dibawah ini :

1. Login Blogger
2. Pilih Tabs "Tata Letak"
3. Klik "Tambah Gadget" [Dibawah Header]
4. Kemudian Cari dan Pilih "HTML/JavaScript"
5. Lalu Letakkan kode di bawah ini pada konten Gadget baru anda

KODE CSS/JAVASCRIPT :

<style>
#meno{
 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 right,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;
}
#meno li{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
 line-height: 0;
}
#meno a{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: normal 11px/25px Hobo Std, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}
#meno li:hover > a{
 color: #fafafa;
}
*html #meno li a:hover /* IE6 */{
 color: #fafafa;
}
#meno li:hover > ul{
 display: block;
}
#meno 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 right,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;
}
#meno ul ul{
  top: 0;
  left: 150px;
}
#meno 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;
}
#meno ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none; 
}
#meno ul a{ 
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #meno ul a /* IE6 */{ 
 height: 10px;
}
*:first-child+html #meno ul a /* IE7 */{ 
 height: 10px;
}
#meno ul a:hover{
 background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba);
 background: -webkit-gradient(linear, left top, left right, 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);
}
#meno ul li:first-child > a{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#meno 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;
}
#meno ul ul li:first-child a:after{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#meno ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}
#meno ul ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
    border-right-color: transparent;
}
#meno ul li:last-child > a{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
#meno:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html #meno             { zoom: 1; } /* IE6 */
*:first-child+html #meno { zoom: 1; } /* IE7 */
</style>
<ul id="meno">
<li><a href="http://ber2saudara.blogspot.com/">Home</a>
</li>
<li><a href="http://ber2saudara.blogspot.com/2012/11/daftar-isi_15.html">Daftar Isi</a>
</li>
<li><a href="#">Bahan Ajar</a>
<ul>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Microsoft%20Office%20Word%202007?&max-results=4">MS. Office Word 2007</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Microsoft%20Office%20Excel%202007?&max-results=4">MS. Office Excel 2007</a></li>
</ul>
<li><a href="#">Categories</a>
<ul>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Anti%20Virus?&max-results=4">Anti Virus</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Game?&max-results=4">GAME</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Multimedia?&max-results=4">Multimedia</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Software%20Internet?&max-results=4">Internet</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Office?&max-results=4">Office</a></li>
<li><a href="http://ber2saudara.blogspot.com/search/label/Windows%20OS?&max-results=4">Windowns OS</a></li>
</ul>
 </li>
<li><a href="http://ber2saudara.blogspot.com/search/label/Tips%20n%20Trik?&max-results=4">Tips & Trik</a>
<ul>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Blogger?&max-results=4">Blogger</a></li>
<li><a href="http://ber2saudara.blogspot.com/search/label/Facebook?&max-results=4">Facebook</a></li>
    <li><a href="http://ber2saudara.blogspot.com/search/label/Tips%20n%20Trik?&max-results=4">Komputer</a></li>
</ul>
 </li>
<li><a href="http://ber2saudara.blogspot.com/search/label/Download?&max-results=4">Download</a></li>
<li><a href="https://plus.google.com/u/0/116135948706117316604/posts"target="_blank">About</a></li></li></ul>

Perhatian :
- Tanda # ganti dengan link yang ingin di tuju ..

6. Klik "Simpan"
7. Selesai deh .

Nah begitulah Cara Membuat Cool Menu Drop Down Dengan CSS3.
Semoga Bermanfaat bagi anda semua..
Selamat Mencoba

Description : Membuat Cool Menu Drop Down Dengan CSS3
Rating : 9 Out Of 10 Based On 10 ratings. 9 user reviews.