»
Tiếng AnhTiếng PhápTiếng Việt

In - Menu xổ dọc được tùy biến 2 - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Menu xổ dọc được tùy biến 2
URL: http://www.javascriptbank.com/customize-dropdown-menu-2-index.html

Menu xổ dọc được tùy biến 2 © JavaScriptBank.comBạ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.Version 2: do một người dùng của JavaScriptBank.com thiết kế lại, dùng trong trường hợp trình duyệt không cho phép JavaScript hoạt động, khi đó hiệu ứng sẽ hiển thị một dropdown bình thườngHiệ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.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Menu xổ dọc được tùy biến 2
URL: http://www.javascriptbank.com/customize-dropdown-menu-2-index.html



CSS
<style type=text/css>/*Customize Dropdown Menu 2.0Author: Thái Cao PhongWebsite: www.JavaScriptBank.comPlease 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.*/img{vertical-align: middle;}.title_dropdown{padding: 1px;background: url(dropdown_arrow.jpg) no-repeat right;width: 15px;vertical-align: middle;border: 1px solid silver;width: 180px;height: 17px;font: 12px verdana bold;text-align: left;cursor: hand;}.content_dropdown{position: relative;vertical-align: middle;border: 1px solid black;width: 180px;}.content_dropdown a{text-decoration: none;color: black;}.content_dropdown p.off{margin: 0px;color: black;padding: 3px;padding-left: 10px;cursor: hand;text-align: left;}.content_dropdown p.on{background-color: #000077;color: white;margin: 0px;padding: 3px;padding-left: 10px;cursor: hand;text-align: left;}.content_dropdown img{width: 30px;height: 20px;border: none;margin-right: 5px;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language=javascript>/*    xxxxxxxxxxxxxxx   xxxxxxxxxxx     xxxx    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx         xxxxx       xxxxxxxxxxxx     xxxx         xxxxx       xxxxx  xxxx         xxxxx xxxxxxxxxxxx  xxxx         xxxxx xxxxxxxxxxxxx  xxxxxxxxxxxwww.JavaScriptBank.com         xxxxx  xxxxxxxxxxxx  xxxxxxxxxxxxx         xxxxx        xxxxx  xxxx     xxxx   xxx   xxxxx  xxxxxxxxxxxx    xxxx     xxxx   xxx  xxxxxx xxxxxxxxxxxxx  xxxx     xxxx   xxxxxxxxxx xxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxxxxxx  xxxxxxxxxxx      xxxxxxxxxxxCustomize Dropdown Menu 2.0Author: Thái Cao PhongWebsite: www.JavaScriptBank.comPlease 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';elsediv.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><script language="JavaScript" type="text/javascript">/*<![CDATA[*/// Custom Select (22-August-2007) DRAFT// by Vic Phillips - http://www.vicsjavascripts.org.ukfunction zxcInitSel(zxcid){ var zxcsel=document.getElementById(zxcid); var zxcflag=zxcES('IMG',{position:'absolute'}); zxcflag.src=zxcsel.options[0].title; var zxccur=(document.all)?'hand':'pointer'; var zxccsel=zxcES('DIV',{position:'relative',width:zxcsel.offsetWidth+zxcflag.width+'px',height:zxcsel.offsetHeight+'px',border:'solid black 1px',cursor:zxccur}); zxcsel.parentNode.replaceChild(zxccsel,zxcsel); zxcES(zxcflag,{left:'2px',top:(zxccsel.offsetHeight-zxcflag.height)/2+'px'},zxccsel); zxcES('DIV',{position:'relative',left:(zxcflag.width+2)+'px'},zxccsel,zxcsel.options[0].text); var zxcdrop=zxcES('IMG',{position:'absolute'},zxccsel); zxcdrop.src=zxcsel.title; zxcES(zxcdrop,{left:(zxccsel.offsetWidth-zxcdrop.width-2)+'px',top:(zxccsel.offsetHeight-zxcdrop.height)/2+'px'}); zxcdrop=zxcES(zxccsel.cloneNode(false),{position:'absolute',visibility:'hidden',left:'-1px',top:zxccsel.offsetHeight+'px'},zxccsel); for (var zxc0=1;zxc0<zxcsel.options.length;zxc0++){  zxcflag=zxcES('IMG',{position:'absolute'});  zxcflag.src=zxcsel.options[zxc0].title;  var zxccopt=zxcES('DIV',{position:'relative',left:'0px',width:'100%',height:zxcflag.height+4+'px',backgroundColor:'#ffffff',cursor:zxccur},zxcdrop);  zxcES(zxcflag,{left:'2px',top:'2px'},zxccopt);  zxcES('DIV',{position:'absolute',left:(zxcflag.width+6)+'px',top:'2px'},zxccopt,zxcsel.options[zxc0].text);  zxccopt.onmouseover=function(){ zxcES(this,{backgroundColor:'#66CCFF'}); }  zxccopt.onmouseout=function(){ zxcES(this,{backgroundColor:'#ffffff'}); }  zxccopt.onclick=function(){ zxcChange(this); }  zxccopt.data=[zxcsel.id,zxc0];  zxccopt.value=zxcsel.options[zxc0].value; } zxcES(zxcdrop,{height:(zxccopt.offsetTop+zxccopt.offsetHeight)+'px'}); zxccsel.onclick=function(event){ zxcOpenClose(event,zxcdrop); } zxcLst=zxccsel;}function zxcChange(zxcopt){  alert('option value '+zxcopt.value); // Demonstration purposes  if (zxcopt.value=='Brazil'){  }  if (zxcopt.value=='Japan'){  }  if (zxcopt.value=='USA'){  }  if (zxcopt.value=='Vietnam'){  }}function zxcES(zxcele,zxcstyle,zxcp,zxctxt){ if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); } for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; } if (zxcp){ zxcp.appendChild(zxcele); } if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); } return zxcele;}var zxcLst;function zxcOpenClose(zxce,zxcobj){ if (!zxce) var zxce=window.event; zxce.cancelBubble=true; if (zxcobj){  zxcLst=zxcobj;  zxcES(zxcLst,{visibility:'visible'}); } else if (zxcLst) zxcES(zxcLst,{visibility:'hidden'});}document.onclick=function(event){ zxcOpenClose(event); }/*]]>*/</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<body onload="zxcInitSel('tst');"><select title=http://www.javascriptbank.com/javascript/form/Customize_Dropdown_Menu/dropdown_arrow.jpg id="tst"><option value="Title" title="http://www.javascriptbank.com/javascript/form/Customize_Dropdown_Menu/flag.png" >Choose your country</option><option value="Brizil" title="brazil.gif" >Brazil</option><option value="Japan" title="japan.gif" >Japan</option><option value="USA" title="usa.gif" >USA</option><option value="Vietnam" title="vietnam.gif" >Vietnam</option></select></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->