thêm tiện ích ==> HTML/Javascript
Dán đoạn code bên dưới vào:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" >$(document).ready(function(){ $('li.title a').click(function(e){ var dropDown = $(this).parent().next(); $('.downlistie').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); e.preventDefault(); }) });</script><style>ul.container{ width:275px; padding:5px; } li.accoi-menu{ list-style:none; padding:1px; width:100%;} li.title { border-radius:5px; background:#333333; list-style:none; padding:5px; } li.title a{ color:#ffffff; display:block; padding:5px; font:14px georgia, verdana; overflow:hidden; position:relative; width:100%; text-decoration:none; } .downlistie{ list-style:none; display:none; padding-top:5px; width:100%; } .downlistie li{ list-style:none; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; border-radius:5px; margin:5px ; padding:4px 10px; } .downlistie li:hover { background:orange; } .downlistie li a{ { font:14px georgia, verdana; text-decoration:none; color:#333333; } .downlistie li a:hover { text-decoration:none; color:#333333; } </style><ul class="container"><li class="accoi-menu"> <ul><li class="title"><a href="#" >Blogger</a></li><li class="downlistie"> <ul><li><a href="#" >Templates</a></li><li><a href="#">Widgets</a></li><li><a href="#">Guides</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Wordpress</a></li><li class="downlistie"> <ul><li><a href="#" >Themes</a></li><li><a href="#">Plugins</a></li><li><a href="#">Guides</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Freebies</a></li><li class="downlistie"> <ul><li><a href="#" >Blogger templates</a></li><li><a href="#">Wordpress Themes</a></li><li><a href="#">Plugins</a></li><li><a href="#">Scripts</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Services</a></li><li class="downlistie"> <ul><li><a href="#" >Website Design</a></li><li><a href="#">Blogger</a></li><li><a href="#">Wordpress</a></li><li><a href="#">Custom Templates</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >About us</a></li><li class="downlistie"> <ul><li><a href="#" >About us</a></li><li><a href="#">Contact us</a></li><li><a href="#">Disclaimer</a></li><li><a href="#">Privacy policy</a></li></ul></li></ul></li></ul>
EmoticonEmoticon