Cara membuat Menu Popup

Menu Popup adalah menu yang berfungsi saat diklik akan menampilkan beberapa menu lagi,pembuatannya pun cukup mudah dan tidak perlu lagi mengobrak-ngabrik code CSSnya.untuk demo sudah ada dibagian kiri.








1. Tambahkan code CSS ini kedalan website kamu namun untuk diblogger anda dapat memasukannya diatas code </style>.

.size { position:relative }
.size .field {
 width:150px;background:white; color:black; padding:5px; border:none; cursor:pointer;
 font-family:'lucida sans unicode',sans-serif; font-size:12px;
 border:solid 1px black;
 -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;  z-index:999;
 width:142px;
 margin:0; padding:10px; list-style:none;
 background:#fff; color:#333;
 -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
 border-bottom: solid 1px #ccc;
width:95%;
}
.size>ul.list li:last-child { border:none }

2. Tambahkan code JS ini tepat diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/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);

$(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();
});
</script>

3. Masukan code HTMLnya dimana saja entah itu dibagian content atau diwidget blogger.

<div class="size">
<input type="text" name="test" value="Sub-Forums ▼" class="field" readonly="readonly" />
<ul class="list">
<li><a href="forum-15.html" title="">Sub 1</a></li>
</ul>
</div>

Maka hasilnya akan seperti ini :

• Sub 1

Bagaimana mudah bukan ?.