Multi Level Drop-Down Menu Dengan CSS dan JQuery

 

Liat Ini demonya da mangkin ngerti kan

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan script JQuery berikut sebelum tag </head>

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

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery jadi

<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://proallblogs.blogspot.com/2011/03/multi-level-drop-down-menu-dengan-css.html"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 

.jqueryslidemenu{ <br /> font: bold 12px Verdana; <br /> background: #414141; <br /> width: 100%; <br /> } <br /> <br /> .jqueryslidemenu ul{ <br /> margin: 0; <br /> padding: 0; <br /> list-style-type: none; <br /> } <br /> <br /> /*Top level list items*/ <br /> .jqueryslidemenu ul li{ <br /> position: relative; <br /> display: inline; <br /> float: left; <br /> } <br /> <br /> /*Top level menu link items style*/ <br /> .jqueryslidemenu ul li a{ <br /> display: block; <br /> background: #414141; /*background of tabs (default state)*/ <br /> color: white; <br /> padding: 8px 10px; <br /> border-right: 1px solid #778; <br /> color: #2d2b2b; <br /> text-decoration: none; <br /> } <br /> <br /> * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ <br /> display: inline-block; <br /> } <br /> <br /> .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ <br /> color: white; <br /> } <br /> <br /> .jqueryslidemenu ul li a:hover{ <br /> background: black; /*tab link background during hover state*/ <br /> color: white; <br /> } <br /> <br /> /*1st sub level menu*/ <br /> .jqueryslidemenu ul li ul{ <br /> position: absolute; <br /> left: 0; <br /> display: block; <br /> visibility: hidden; <br /> } <br /> <br /> /*Sub level menu list items (undo style from Top level List Items)*/ <br /> .jqueryslidemenu ul li ul li{ <br /> display: list-item; <br /> float: none; <br /> } <br /> <br /> /*All subsequent sub menu levels vertical offset after 1st level sub menu */ <br /> .jqueryslidemenu ul li ul li ul{ <br /> top: 0; <br /> } <br /> <br /> /* Sub level menu links style */ <br /> .jqueryslidemenu ul li ul li a{ <br /> font: normal 13px Verdana; <br /> width: 160px; /*width of sub menus*/ <br /> padding: 5px; <br /> margin: 0; <br /> border-top-width: 0; <br /> border-bottom: 1px solid gray; <br /> } <br /> <br /> .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ <br /> background: #eff9ff; <br /> color: black; <br /> } <br /> <br /> /* ######### CSS classes applied to down and right arrow images ######### */ <br /> <br /> .downarrowclass{ <br /> position: absolute; <br /> top: 12px; <br /> right: 7px; <br /> } <br /> <br /> .rightarrowclass{ <br /> position: absolute; <br /> top: 6px; <br /> right: 5px; <br /> }

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

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