Return to iWEBTOOL

Go Back   iWEBTOOL Talk > The Web and your Website > Programming > HTML > JavaScript
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
 
Welcome to iWEBTOOL Talk, where you talk about webmaster-related stuff.
 
Discuss topics which interest you.
With over thousands of threads (topics), we're sure you'll find something that'll interest you.
Ask for help whenever you need it.
We have thousands of members who are available to help you if you need it.
It's absolutely FREE!

 1  Register           2  Browse the board           3  Discuss whatever may interest you!
 


Closed Thread
 
Thread Tools Search this Thread Display Modes
Old 08-08-2007, 04:00 AM   #1
temp
Newcomer
 
temp's Avatar
 
Join Date: Aug 2007
Posts: 1
temp is on a distinguished road
Default 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: http://www.javascriptbank.com/javascript/form/Customize_Dropdown_Menu

Code:
<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>
temp is offline  
 
This is an Ad Revenue Sharing forum Place your advert here
SEO Checklist
Get yourself better ranking with
our "Do-it-Yourself" SEO Checklist.
Click Here
Closed Thread

(Threads which have no activity for more than 30 days are automatically closed.)



Quick Reply
Message:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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 On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
menu vs. seo Bagi Zoltán Search Engine Optimization (SEO) 0 05-11-2007 01:20 PM
Menu jukcoder Website Reviews 0 04-16-2007 02:29 PM
customize your templates & FREE SEO _torero_ Templates 1 03-20-2007 09:19 AM
Sub Menu Link Trouble okinawa Programming 0 11-21-2006 12:02 PM
db populated drop down menu jumpenjuhosaphat PHP 7 08-05-2006 11:23 PM


All times are GMT. The time now is 01:07 PM.


Powered by vBulletin v3.6.7 © 2008, Jelsoft Enterprises Ltd. SEO by vBSEO © 2006, Crawlability, Inc.