NamePros.Com (http://www.namepros.com/)
-   CODE (http://www.namepros.com/code/)
-   -   Try my new JavaScript: Customize Dropdown Menu (http://www.namepros.com/code/361219-try-my-new-javascript-customize-dropdown.html)

temp304 08-13-2007 07:40 AM

Try my new JavaScript: Customize Dropdown Menu
 
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: www.JavaScriptBank.com/../Customize_Dropdown_Menu/

Code:
<style type=text/css> /* 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. */ 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').st yle.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>


All times are GMT -7. The time now is 01:54 PM.
Site Sponsors
Advertise your business at NamePros

Powered by: vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 2.4.0