GIDForums  

Go Back   GIDForums > Webmaster Forums > Web Design Forum
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

 
 
Thread Tools Search this Thread Rate Thread
  #1  
Old 13-Aug-2007, 10:03
temp304 temp304 is offline
New Member
 
Join Date: Aug 2007
Posts: 2
temp304 is on a distinguished road

Try my new JavaScript: Customize Dropdown Menu


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

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

URL: JavaScriptBank.com

HTML 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').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>
Last edited by admin : 02-Oct-2007 at 09:24. Reason: Please insert your markup between [html] & [/html] tags
 
 

Recent GIDBlogProblems with the Navy (Chiefs) by crystalattice

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Shapes Functions Version 2 - Arrays! Cecil C Programming Language 1 09-Jul-2006 21:39
Pass by references? Cecil C Programming Language 4 29-Jun-2006 03:30
An Introduction to Javascript JasonMichael Web Design Forum 2 24-Oct-2004 11:19
javascript menu dopee Web Design Forum 7 31-Jul-2004 00:22
JavaScript Tutorial Part 1 pcxgamer Web Design Forum 2 01-Dec-2003 10:16

Network Sites: GIDNetwork · GIDWebHosts · GIDSearch · Learning Journal by J de Silva, The

All times are GMT -6. The time now is 08:26.


vBulletin, Copyright © 2000 - 2009, Jelsoft Enterprises Ltd.