Cara Membuat Menu Bar Drop Down Multi Level

Fungsi dari menu bar drop down tidak lain untuk menata,menyusun sekaligus untuk meminimaliskan jumlah menu yg banyak menjadi ringkas dan rapi.Bayangin aza kita nyusun 10 sampai seterusnya kategori di menu bar tentu akan penuh dan terlihat tidak rapi,dg tehnik ini kita bi menghemat tempat,hanya dg memilih menu yg kita inginkan akan muncul sub menu di bawahnya.Cara buatnya pun tiap2 orang berbeda,salah satu caranya seperti berikut ini :

• Login ke Blog sobat,pada dashboard pilih template
• Pilih edit HTML,jangan lupa BackUp dulu templatenya untuk antisipasi
• Kemudian centang Expand Widget Template
• Cari kode </b:skin> ,untuk mudahnya tekan Ctrl+F atau F3,kemudian letakkan kode berikut sebelum kode </b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Kemudian letakkan kode berikut sebelum kode </head>

<link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>

Kemudian cari kode berikut atau yg mirip

 <div id='header-wrapper'>
<b:section class='header' id='header maxwidget='1' showaddelement='no'>
<b:widget id='header1' locked='true' title='Info Dunia dan Tips Blogger' (Header)' type='Header'/>
</b:section>
</div>

Terkadang tiap-tiap template berbeda kodenya seperti di bawah ini :

 <b:widget id='Header1' locked='true' title='Info Dunia dan Tips Blogger (Header)' type='Header'>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>

Kemudian letakkan kode berikut tepat setelah kode di atas tag penutup </div>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Folder 1 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://odyckdnero.blogspot.com'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>

Kemudian simpan template dan lihat hasilnya...
Selamat Mencoba dan MOGA BERMANFAAT...

Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Cara Membuat Menu Bar Drop Down Multi Level
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2011/11/cara-membuat-menu-bar-drop-down-fungsi.html

Related Post