Recent Interactions Popup Menu

Recent Interactions Popup Menu. Modified from: http://css-tricks.com/snippets/jquery/styled-popup-menu/

by hellosze

HTML

<table>
    <tr>
        <td>
<div class="size">
	<input type="text" name="test" value="Recent Interactions" class="field" readonly="readonly" />
	<ul class="list">
		<li>[email protected]</li>
		<li>[email protected]</li>
		<li>[email protected]</li>
	</ul>
</div>
        </td>
        <td>

<div class="size">
    <input type="text" name="test" value="Logged in as Susan Roberts" class="field" readonly="readonly" />
	<ul class="list formatright">
		<li>Member History</li>
		<li>End Member Session</li>
	</ul>
</div>
        </td>
    </tr>
</table>

CSS

.size { position:relative; width: 310px; }
.size .field {
	width:300px; background:#FFF; color:#000; padding:5px; border:none; cursor:pointer;
	font-family:'lucida sans unicode',sans-serif; font-size:1em;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
    text-align: right;


}
.formatright { text-align: right; }
.size .field:hover {
	border:solid 0px #fff;
}
.size>ul.list { 
    display:none;
	position:absolute; left:-1px; top:38px; z-index:999;
	width:310px;
	margin:0; padding:0px; list-style:none;
	background:#fff; color:#333;

}
.size>ul.list li {
	padding:5px;
    font-family: arial;
    font-size: 12px;
	border-bottom: solid 0px #ccc;
}
.size>ul.list li:hover {
	background:#fff; color:#ccc;
}
.size>ul.list li:last-child { border:none }

JavaScript

(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);
                obj.find('.field').css({"border-bottom": "solid 1px #ccc"});
                
			$(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);

$(function(){
	$('.size').styleddropdown();
});