Menu xổ dọc được tùy biến

Bạn có thể dùng đoạn mã Customize Dropdown Menu này để tạo các menu xỗ dọc có nhiều lựa chọn, chẳng hạn như các menu: chọn ngôn ngữ, chọn giao diện, chọn quốc gia,...

Ngoài việc được tùy biến để có các chức năng như một dropdown menu bình thường, hiệu ứng này còn cho phép bạn thêm vào hình ảnh cho tiêu đề và các lựa chọn của dropdown.

Hãy thử hiệu ứng này để cảm nhận sự khác biệt.
Hiệu ứng đã được kiểm tra và chạy tốt trên các trình duyệt như: IE 7, Opera 9, Firefox 2, Netscape 8.

Sampled by JavaScriptBank.com

Choose your country

Setup

CSS Code

JavaScript Code

Customize Dropdown Menu 1.0
	Author: Thái Cao Phong
	Website: www.JavaScriptBank.com
	Please keep these comments above to contact author when you use this script. Thank you very much.
	Vietnamese: Xin ban hay giu lai nhung thong tin tren de nguoi khac co the lien he voi tac gia neu ban co 
su dung doan ma nay. Cam on ban rat nhieu.
*/
var ie = navigator.appName=='Microsoft Internet Explorer'?true:false;
function toggle_dropdown(id)
{
	var div = document.getElementById(id);
	if(div.style.display == 'none')
		div.style.display = 'block';
	else
		div.style.display = 'none';
}
function getObject(evt)
{
	var srcElem;
	if(ie)
	{
		srcElem = event.srcElement;
	}
	else
	{
		srcElem = evt.target;
	}
	return srcElem;
}
function go_any_page()
{
	alert('This is example');
}
function changeStyle(pTag)
{
	pTag.className = (pTag.className == 'off' ? 'on' : 'off');
}
function dropdown_on(evt)
{
	var pTag = getObject(evt);
	if(pTag.tagName == 'P' && pTag.parentNode.id == 'language_dropdown')
		changeStyle(pTag);
}
function dropdown_off(evt)
{
	var pTag = getObject(evt);
	if(pTag.tagName == 'P' && pTag.parentNode.id == 'language_dropdown')
		changeStyle(pTag);
}
function click(evt)
{
	var pTag = getObject(evt);
	if(!document.getElementById('language_dropdown'))
		return;
	if(pTag.tagName == 'DIV' && pTag.className == 'title_dropdown')
		toggle_dropdown('language_dropdown');
	else if(document.getElementById('language_dropdown').style.display == 'block')
		toggle_dropdown('language_dropdown');
}
document.onmouseover = dropdown_on;
document.onmouseout = dropdown_off;
document.onclick = click;
</script>

Dropdown HTML Code

Download