Try my new JavaScript: Customize Dropdown Menu

Discussion in 'JavaScript' started by temp2, Aug 7, 2007.

Thread Status:
Not open for further replies.
  1. #1
    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.

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

    URL: http://www.javascriptbank.com/javascript/form/Customize_Dropdown_Menu

    <style type=text/css>
    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><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 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>
    <div class=title_dropdown><img class=imgclass src="flag.png">Choose your country</div>
    	<div id=language_dropdown style='display: none; z-index: -100;' class=content_dropdown>
    		<p class=off onClick="go_any_page();"><img src='brazil.gif'>Brazil</p>
    		<p class=off onClick="go_any_page();"><img src='japan.gif'>Japan</p>
    		<p class=off onClick="go_any_page();"><img src='usa.gif'>USA</p>
    		<p class=off onClick="go_any_page();"><img src='vietnam.gif'>Vietnam</p>
    	</div>
    
    Code (markup):

     
    temp2, Aug 7, 2007 IP
  2. pluto459

    pluto459 Active Member

    Messages:
    1,221
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #2
    thanks
    will check it out
     
    pluto459, Aug 7, 2007 IP
Thread Status:
Not open for further replies.