CARA MEMBUAT MENU MULTI LEVEL DROP DOWN MENU JQUARY

Berikut langkah-langkah membuat menu multi level drop down menu jquary:
 Login ke akun blogger anda

1.  Tuju ke -> Rancangan --> Edit HTML.
2. Lalu taruh kode script berikut sebelum kode </head>
3.  

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

     4.Lalu Tambahkan Script Berikut dibawah kode script tadi:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.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://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

     5.Kemudian tambahkan kode script berikut tepat diatas kode ]]></b:skin>

.jqueryslidemenu{ 
font: bold 12px Verdana; 
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; 
}

    6.Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'> 

<div id="myslidemenu" class="jqueryslidemenu"> 
<ul> 
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Folder 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> 
  <li><a href="#">Sub Item 1.4</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> 
            <li><a href="#">Sub Item 3.1.1.5</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Sub Item 2.1.4</a></li> 
    </ul> 
  </li> 
  </ul> 
</li> 
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li> 
</ul> 
<br style="clear: left" /> 
</div>

Lalu klik save.

Related Post