Menu Pop timbul Bergaya - Trik CSS

Anonim

Idea ini berasal dari Veer.com dan bagaimana mereka menangani dropdown untuk perkara seperti ukuran T-Shirt. Terima kasih kepada Dennis Sa.

Lihat Demo

HTML

Kami akan membungkus input teks biasa di dalam, yang juga berisi senarai yang tidak tersusun yang akan mewakili nilai untuk menu pop timbul.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Senarai akan disembunyikan secara lalai, tetapi semuanya akan digayakan dan siap digunakan apabila klik memicu untuk ditampilkan.

.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

Kami akan menyatukan plugin cepat, supaya fungsi ini dapat dipanggil pada pembungkus div yang mengandungi persediaan HTML yang sama. =

(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);

Penggunaan

Kemudian kita hanya memanggil pemalam, apabila DOM sudah tentu sudah siap.

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