Version complète: jsB@nk » Form » Dropdown » Customize Dropdown Menu 2
URL: https://www.javascriptbank.com/customize-dropdown-menu-2-index.html
Personnaliser le menu déroulant est conçu pour afficher des choix, en tant que: langue, pays, thèmes, ... mais il est differrent de version originale dans les navigateurs. Cet outil combine CSS et JavaScript pour créer un menu déroulant, vous pouvez ajouter une image à tilte, tous les choix. Version 2: vérifier si Javascript est désactivé, puis ajoutez la normale menu déroulant Essayons déroulant ci-dessous et sentir les différences. Testé: IE 7, Opera 9, Firefox 2, Netscape 8.
Version complète: jsB@nk » Form » Dropdown » Customize Dropdown Menu 2
URL: https://www.javascriptbank.com/customize-dropdown-menu-2-index.html
<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--><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--><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-->