Link to home
Create AccountLog in
Avatar of hankknight
hankknightFlag for Canada

asked on

jQuery: Slide Down Pretty Select on Hover

Now you have to click on "Choose One" to see the drop down options.  I want the options to slide down so you can see them when you hover over "Choose One".
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 pretty_selects();

});
	
function pretty_selects() {
        $('.styled-select').each(function () {
            $(this).wrap('<div class="pretty-select" />')
            $('<div class="select-text" />').prependTo($(this).parent('.pretty-select'));
            $(this).parent().children('.select-text').text($(this).attr('name').replace(/_/gi, ' '));
        }).change(function () {
            $(this).parent().children('.select-text').text($(this).children('option:selected').text());
        });
}

</script>
<style type="text/css">

body {
background: #eeeeff;
}

.pretty-select{
	height: 35px;
	position: relative;
	width:200px;
}

.pretty-select .select-text{
	height: 35px; 
	line-height: 35px;
	text-indent: 10px;
	color: #fff;
	background: #aaa;
	border: 1px solid #222;
}

.pretty-select select{	
	width: 100%;
	position: absolute;
	top: 0;
	right: 0; bottom: 0;
	opacity: 0;
	filter:alpha(opacity=0);
}
.pretty-select select option{
	padding: 5px 0;
	text-indent: 10px;
	border-bottom: 1px dotted #ccc;
}
.pretty-select select option:hover{
	background-color: #d6d6d6;
	cursor: pointer;
}

</style>
</head>
<body>

<select name="Choose_One" class="styled-select"> 
<option value="a">Option 1</option> 
<option value="b">Option 2</option> 
<option value="c">Option 3</option> 
<option value="d">Option 4</option> 
<option value="e">Option 5</option> 
</select> 

</body>
</html>

Open in new window

Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

ASKER CERTIFIED SOLUTION
Avatar of mickey159
mickey159
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account