Facebook style select box
Facebook style select box
Facebook Style Select box using Jquery ui.
It provides stylish select dropdown menu. It provides the functionality of the select drop down like facebook select
box.
Preview :
Facebook Style Select dropdown menu
Following Jquery and Css are Required for the functionality.
Add the following Jquery and css in the header of the page.
<script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Demo syntax for Facebook style select box
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Facebook Style Jquery Select Dropdown Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#status" ).selectmenu();
});
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 35px 0 0 0;
}
select {
width: 290px;
}
.overflow {
height: 290px;
}
</style>
</head>
<body><div class="main-demo">
<form action="#">
<fieldset>
<label for="speed">Select a Status</label>
<select name="status" id="status">
<option selected="selected">Public</option>
<option>Friends</option>
<option>Only Me</option>
</select>
</form>
</div>
</body>
</html>
Advertisements
