Menu
Hello,
I have been working on creating a contact form for a website i am working on. I have been having lots of trouble getting two select menus to function properly (as far as adding the CSS to it goes). Was wondering if there was someone that would help me figure this out.
If you guys need more information or have another suggestion for doing this then please let me know, I am open to any suggestion
This is the website i have been working with.
[url]http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
this is my code.
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Reinventing drop down with CSS and jQuery – demo</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<style type=”text/css”>
#drop1 {
float:left;
}
#drop2 {
float:right;
}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:160px; padding:5px;}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
createDropDown();
$(“.dropdown dt a”).click(function() {
$(“.dropdown dd ul”).toggle();
});
$(document).bind(‘click’, function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass(“dropdown”))
$(“.dropdown dd ul”).hide();
});
$(“.dropdown dd ul li a”).click(function() {
var text = $(this).html();
$(“.dropdown dt a”).html(text);
$(“.dropdown dd ul”).hide();
var source = $(“#source1”);
source.val($(this).find(“span.value”).html())
});
});
function createDropDown(){
var source = $(“#source1”);
var selected = source.find(“option[selected]”);
var options = $(“option”, source);
$(“#drop1″).append(‘<dl id=”target” class=”dropdown”></dl>’)
$(“#target”).append(‘<dt><a href=”#”>’ + selected.text() +
‘<span class=”value”>’ + selected.val() +
‘</span></a></dt>’)
$(“#target”).append(‘<dd><ul></ul></dd>’)
options.each(function(){
$(“#target dd ul”).append(‘<li><a href=”#”>’ +
$(this).text() + ‘<span class=”value”>’ +
$(this).val() + ‘</span></a></li>’);
});
}
</script>
</head>
<body>
<div id=”drop1″>
<select id=”source1″>
<option selected=”selected” value=”BR”>Brasil</option>
<option value=”FR”>France</option>
<option value=”DE”>Germany</option>
<option value=”IN”>India</option>
<option value=”JP”>Japan</option>
<option value=”RS”>Serbia</option>
<option value=”UK”>United Kingdom</option>
<option value=”US”>United States</option>
</select>
</div>
<div id=”drop2″>
<select id=”source2″>
<option selected=”selected” value=”BR”>Brasil</option>
<option value=”FR”>France</option>
<option value=”DE”>Germany</option>
<option value=”IN”>India</option>
<option value=”JP”>Japan</option>
<option value=”RS”>Serbia</option>
<option value=”UK”>United Kingdom</option>
<option value=”US”>United States</option>
</select>
</div>
</body>
</html>