Home jQuery Vertical Accordion Menu jQuery Vertical Accordion Menu Author - waroho 1:45 AM4 minute read <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src='http://vertical-accordion-menu.googlecode.com/files/GR_v-accordion-gubhugreyot.js' type='text/javascript'></script> <script type="text/javascript"> //<![CDATA[ ddaccordion.init({ headerclass: "accordion", contentclass: "ul_accordion", revealtype: "click", // "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover" collapseprev: true, defaultexpanded: [0], onemustopen: false, animatedefault: false, persiststate: true, toggleclass: ["", "aktif"], togglehtml: ["prefix", "", ""], animatespeed: "slow", oninit:function(headers, expandedindices){ }, onopenclose:function(header, index, state, isuseractivated){ } }) //]]> </script> <style type="text/css"> h3.selektor accordion{ font-weight: bold; font-size:14px; } .molormenu{ background:#33333; width:auto; margin-top:10px; font-family:Arial; } .molormenu .selektor{ font-weight: bold; font-size:15px; font-family:Times; color: #e79958; background: transparent url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-2.gif) repeat-x center left; margin-bottom: 5px; text-transform: uppercase; padding: 10px 0 10px 10px; cursor: pointer; border-bottom:1px solid #666; } .molormenu .aktif{ background-image: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-3.gif); } .molormenu ul{ background:transparent; list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; } .molormenu ul li{ padding-bottom: 2px; } .molormenu ul li a{ color: #fceada; background: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-4.gif) no-repeat center left; display: block; padding: 2px 0; padding-left: 19px; text-decoration: none; font-weight: bold; border-bottom: 1px solid #666; font-size: 11px; font-weight:normal; } .molormenu ul li a:visited{ background:red; color: #3a3838; } .molormenu ul li a:hover{ color:yellow; background-color: black; } </style> <div style="background:#222;padding:2px;border:1px solid 666;"> <div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px 5px;border:1px solid blue;"> CLICK any categories for open!</div> <div class="clear:both"> </div> <div class="molormenu"> <h3 class="selektor accordion"> Menu-1</h3> <ul class="ul_accordion"> <li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion"> Menu-2</h3> <ul class="ul_accordion"> <li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion"> Menu-3</h3> <ul class="ul_accordion"> <li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion"> Menu-4</h3> <ul class="ul_accordion"> <li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion"> Menu-5</h3> <ul class="ul_accordion"> <li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion"> Menu-6</h3> <ul class="ul_accordion"> <li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> </div> </div> Facebook Twitter Whatsapp Newer Older