Tutorial Styled Popup Menu
This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa.
HTML
We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu.
<div class="size">
<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
<ul class="list">
<li>Male - M</li>
<li>Female - M</li>
<li>Male - S</li>
<li>Female - S</li>
</ul>
</div>CSS
The lists will be hidden by default, but still all styled up and ready to go when a click triggers them to be shown.
.size { position:relative }
.size .field {
width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
font-family:'lucida sans unicode',sans-serif; font-size:1em;
border:solid 1px #EC6603;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.size .field:hover {
border:solid 1px #fff;
-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list { display:none;
position:absolute; left:30px; top:-30px; z-index:999;
width:300px;
margin:0; padding:10px; list-style:none;
background:#fff; color:#333;
-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
padding:10px;
border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }jQuery
We'll throw a quick plugin together, so that this functionality can be called on any div wrapper that contains this same HTML setup.=
(function($){
$.fn.styleddropdown = function(){
return this.each(function(){
var obj = $(this)
obj.find('.field').click(function() { //onclick event, 'list' fadein
obj.find('.list').fadeIn(400);
$(document).keyup(function(event) { //keypress event, fadeout on 'escape'
if(event.keyCode == 27) {
obj.find('.list').fadeOut(400);
}
});
obj.find('.list').hover(function(){ },
function(){
$(this).fadeOut(400);
});
});
obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
obj.find('.field')
.val($(this).html())
.css({
'background':'#fff',
'color':'#333'
});
obj.find('.list').fadeOut(400);
});
});
};
})(jQuery);Usage
Then we just call the plugin, when the DOM is ready of course.
$(function(){
$('.size').styleddropdown();
});