17 April 2013

Cara membuat multi level dropdown menu dengan CSS3

Posted at  14.04  |  in  widget



Selalu menyenangkan untuk belajar dan mengeksplorasi standar baru yang diperkenalkan CSS. Seiring dengan perkembangan HTML5 dan CSS3, skrip berat dan tool flash jarang digunakan. Kita akan belajar membuat dan menerapkannya ke Blogger. Menu ini semata-mata murni CSS3  tanpa menggunakan jquery sama sekali! 

Menu ini menggunakan box-shadow sederhana, text-shadow dan properti radius border.
Menu ini kompatibel dengan semua browser seperti FireFox, Chrome dan Safari. Anda hanya perlu copy dan paste kode. Menu ini dibuat oleh webDesignerWall dan disesuaikan dengan platform Blogspot blog  oleh MBT.




CARA MENAMBAHKAN MENU INI DI BLOG
  1. Silahkan masuk ke akun blogger anda.
  2. Klik Tata Letak-> Tambahkan Gadget-> HTML/Javascript
  3. Pastekan semua kode berikut dibawah ini kedalamnya:
<style>
#MBT-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;   
}
a {
    color: #333;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none; }

/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
   
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
    background: #000;
    color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
text-align:left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
    display: block;
}
/* level 2 list */
#nav ul {
    display: none;
text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
               
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>
                   
<li><a href="#">Sub-Level Item 1</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>   
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>
  
KET:
  • Ganti tanda # dengan URL/Link anda dan ganti teks judul menu sesuai yang anda inginkan.
</li><li><a href="#">Sitemap</a></li>

  • Untuk merubah warna silahkan ganti #0080ff     Dengan warna yang anda inginkan.       
  • Simpan Gadget dan lihat hasilnya...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 14.04
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

18 komentar:

  1. Balasan
    1. Terima kasih atas apresiasi artikelnya, semoga bermanfa'at bagi kita semua khususnya kepada para blogger. Saya sendiri masih pemula, belum professional. Jangan bosan berkunjung ke blog saya ya?..:)

      Hapus
  2. gan giman sih memasukan menu ke dropdown kunjungi saya balik di www.sasindoq.blogspot.com

    BalasHapus
    Balasan
    1. cari kode ]]></b:skin> kemudian letakan kode dari <style>..bla..bla..sampai </style> DIBAWAH KODE ]]></b:skin>.
      Kemudian cari lagi kode pada template anda dari kode <div id='navigasi'>..bla..bla..sampai tag/kode </div>.
      Ganti kode diatas dengan kode <div id="MBT-Container">..bla..bla..sampai</ul></div>. Nanti menu bawaan template anda berubah menjadi menu multi level dropdown..

      Hapus
  3. kalau buat drop down link di postingan bagaimana caranya?

    Misal link ''Sayur'' ketika di klik ada linknya.

    Terima kasih. :)

    BalasHapus
    Balasan
    1. Anda tinggal mengganti menu atau sub menu dengan nama menu/sub menu, kemudian ganti tanda # dengan link yang dituju..

      Hapus
  4. wahhh keren gan, trimakasih gan sangat membantu..

    BalasHapus
    Balasan
    1. sama-sama saudara alkanden. Terima kasih banyak atas kunjungannya.. :)

      Hapus
  5. bagus banget artikelnya gan (o)
    maju terus ya gan :))
    follow balik gan my blog http://blogharun26.blogspot.com/

    BalasHapus
    Balasan
    1. Terima kasih banyak saudara taretan mania, ok..segera. :)

      Hapus
  6. Balasan
    1. Sama-sama saudara Gie Achmad, terima kasih atas kunjungannya..

      Hapus
    2. wach asyik nie menunya om keyen.. (h)

      Hapus
    3. Terima kasih banyak mas imron.. :)

      Hapus
  7. Your'e welcome. Thank you very much for your visit and your comment, best regards ..

    BalasHapus
  8. Ajiib mass tapi kenapa ya setiap saya pake menu dropdown , dropdownnya engga keliatan kepotong gitu, mohon infonya ya mas blog saya aditriono.blogspot.com, saya masih kurang mengerti karena saya newbie, trimakasih mas

    BalasHapus
  9. kayaknya mantap mas jalu... gak payah2 edit html, kadang bagi saya (baru belajar bikin blog) mengedit html itu sangat sulit,.....nanti kalo saya butuh artikel menyangkut blog, izin kopas ya mas...maksih...

    BalasHapus
  10. Mas Jalu...
    tolong dikasi kode script / cara mas bikin "LABEL" dan "ARSIP BLOG" di Blog mas itu, senang kali saya liatnya, maaf mas (saya baru belajar bikin blog) itu Judulnya Jambatan belum selesai sampai sekarang karena ilmu nya saya gak ada, modal hanya ingin belajar... makasih mas...

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top