« »

Customize Dropdown Menu is designed to display some choices, as: languages, countries, themes,... but it's differrent from original version in browsers. This tool combine CSS and JavaScript to create a dropdown you can add image to tilte, every choice.

Version 2: check if JavaScript is disabled, then add normal dropdown menu

Let's try dropdown below and feel differences.
Tested: IE 7, Opera 9, Firefox 2, Netscape 8.

Label: Customize Dropdown Menu 2

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type=text/css>
/*
	Customize Dropdown Menu 2.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.
*/
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
	-->

Copy All x2

<script language=javascript>
/*
		
		    xxxxxxxxxxxxxxx   xxxxxxxxxxx     xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		         xxxxx       xxxxxxxxxxxx     xxxx
		         xxxxx       xxxxx			  xxxx
		         xxxxx		 xxxxxxxxxxxx	  xxxx
		         xxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxx			www.JavaScriptBank.com
		         xxxxx		  xxxxxxxxxxxx	  xxxxxxxxxxxxx
		         xxxxx       		 xxxxx	  xxxx     xxxx
		   xxx   xxxxx		  xxxxxxxxxxxx    xxxx     xxxx
		   xxx  xxxxxx		 xxxxxxxxxxxxx	  xxxx     xxxx
		   xxxxxxxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxxxx
		    xxxxxxxx		  xxxxxxxxxxx      xxxxxxxxxxx

	Customize Dropdown Menu 2.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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Custom Select (22-August-2007) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk

function 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
	-->

Copy All x2

<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
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (1)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

CryptoKD.com ApexBTC.com Card.rip CreditCard.rip CoinHolo.com choose.works CTRCoin.com ChainTutor.com XMQV.com system.money pornID.net choose.exchange eChainBank.com ZWVQ.com index.services this.bid ABP3.com war.money ChatTotal.com YeuNu.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/10/2007
Vic Phillips [more]
5,960
0
10
1
16.6 KBytes

JavaScript Customize Dropdown Menu 2

3.9/5 10 votes / 5,960 previews / 0 comment 30/10/2007 Customize Dropdown Menu is designed to display some choices, as: languages, countries, themes,... but it's differrent fr...JavaScript Customize Dropdown Menu 2 - Customize Dropdown Menu 2

enryku hoangphucthanh phamtuanbang blackant255 thanung phuclui anhbam2007 khanhnghia caothangkt qpmzmt