![]() |
|
![]() |
|
|
Thread Tools | Display Modes |
|
|
#1 |
|
Newbie
Join Date: Aug 2007
Posts: 1
Rep Power: 0
![]() |
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/ <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> |
|
|
|
|
|
#2 |
|
Expert Programmer
|
When I click the dropdown menu, the rest of the page moves down to make way for the selections; I doubt this is the behavior you intended.
The dropdown will not work at all if the user does not have JavaScript enabled. Ideally, you should begin with a working HTML dropdown menu and replace it with your own (by using the removeChild and createElement methods as necessary). Nevertheless, good job. |
|
|
|
![]() |
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Start Learning Java script | smita | JavaScript and Client-Side Browser Scripting | 0 | Mar 15th, 2007 7:47 AM |
| SWING stuff... | dsbabyGurl | Java | 6 | Oct 27th, 2006 10:45 PM |
| dropdown menu location problems | Ribbott | JavaScript and Client-Side Browser Scripting | 6 | Oct 11th, 2006 4:23 PM |
| dropdown menu with persistence? | kerriganm | HTML / XHTML / CSS | 11 | Dec 17th, 2005 2:33 PM |