Cara Membuat Multi Level Drop Down Menu di Blog ~ coretan guru

M embuat multi level drop down menu adalah hal baru bagi saya. Setelah berkeliling ke sana kemari baru saya temukan yang sesuai dengan keinginan saya. Tapi saya tidak memasangnya di blog, hanya ingin berbagi ilmu sja kepada yang ingin mencoba . Caranya juga sangat simpel, berikut ini langkah-langkahnya.

1. Loggin ke blog anda

2. Masuk menu elemen halaman>>tambah gadget, pilih html/javascript gadget. Coppy kode berikut dan
paste-kan di gadget anda.

/* 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/AVvXsEjWecJSuHe7l22S4U9fW2seRSwELiNDUIiX909oZ9UtCAQpXOBfjVrI3kQD_t9L_E-qiSWck7_P_ROt6I04811hMFGJN6Y70UplQTUYHApE6ptq2zxa3g-W8GBWaQ-nB0Mfd024FSmf03U/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/AVvXsEjWecJSuHe7l22S4U9fW2seRSwELiNDUIiX909oZ9UtCAQpXOBfjVrI3kQD_t9L_E-qiSWck7_P_ROt6I04811hMFGJN6Y70UplQTUYHApE6ptq2zxa3g-W8GBWaQ-nB0Mfd024FSmf03U/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/AVvXsEjWecJSuHe7l22S4U9fW2seRSwELiNDUIiX909oZ9UtCAQpXOBfjVrI3kQD_t9L_E-qiSWck7_P_ROt6I04811hMFGJN6Y70UplQTUYHApE6ptq2zxa3g-W8GBWaQ-nB0Mfd024FSmf03U/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/>

Catatan :

<li><a href="#">Tab Text</a></li> tanda # ganti dengan URL tujuan anda, Tab text ganti dengan tulisan anda yang nantinya akan muncul di menu.
Untuk mengubah warna tab ganti kode #0080ff dengan warna yang anda inginkan menggunakan alat pengubah warna.

Kira-kira setelah jadi hasilya seperti ini :

Label :Tutorial

coretan guru

Pages

Wednesday, 11 April 2012

Cara Membuat Multi Level Drop Down Menu di Blog

1 comments:

Post a Comment

Artikel Populer

Total Pageviews

Label Artikel

Blog Archive

Kintaka Blog

Labels

Subscribe Now

Subscribe now!