Tạo trình đơn thả xuống đơn giản sử dụng JQuery

Đăng bởi Admin | 21/10/13 | 0 nhận xét

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  </head> và thêm mã dưới đây ngay trên nó:

<!--jquery-DD-Menu-Starts--><style type="text/css">/* menu styles */#jsddm{ margin: 0;padding: 0}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}#jsddm li a{ display: block;background: #324143; /*DARK-GREEN*/padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}#jsddm li a:hover{ background: #24313C}#jsddm li ul{ margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}#jsddm li ul li{ float: none;display: inline}#jsddm li ul li a{ width: auto;background: #A9C251; /*LIGHT-GREEN*/color: #24313C}#jsddm li ul li a:hover{ background: #8EA344}</style><!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open);$('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;</script><!--jquery-DD-Menu-Stops-http://bdlab.blogspot.com-->

Trước khi bạn lưu mẫu, bạn có thể thực hiện những thay đổi trong các mã:

Để có được mã màu HTML, bạn có thể tham khảo TẠI ĐÂY

5. Lưu mẫu của bạn. 

6. Tiếp theo bạn tới blogger và nhấn vào Bố cục 
7. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
8. Dán mã dưới đây vào và lưu lại:

<!--BODY-CODE--><ul id="jsddm"><li><a href="#">JavaScript</a><ul><li><a href="#">Drop Down Menu</a></li><li><a href="#">jQuery Plugin</a></li><li><a href="#">Ajax Navigation</a></li></ul></li><li><a href="#">Effect</a><ul><li><a href="#">Slide Effect</a></li><li><a href="#">Fade Effect</a></li><li><a href="#">Opacity Mode</a></li><li><a href="#">Drop Shadow</a></li><li><a href="#">Semitransparent</a></li></ul></li><li><a href="#">Navigation</a></li><li><a href="#">HTML/CSS</a></li><li><a href="http://thuthuatvitinhaz.blogspot.com/">Blogger Help</a></li></ul>

   Thay link ( #) và tên link (dòng đậm) theo ý bạn. Thật đơn giản phải không nào?

Chúc bạn thành công !...

                                                                    Nguồn tham khảo:  bdlab.blogspot.com