Styled Popup Menu - CSS-gudrybės

Anonim

Ši idėja yra „Veer.com“ ir kaip jie tvarko išskleidžiamuosius dalykus, pavyzdžiui, marškinėlių dydžius. Ačiū Dennisui Sa.

Peržiūrėti demonstracinę versiją

HTML

Įvyniosime įprastą teksto įvestį į vidų, kuriame taip pat yra nesutvarkytas sąrašas, kuris parodys iššokančiojo meniu reikšmes.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Pagal numatytuosius nustatymus sąrašai bus paslėpti, tačiau vis tiek visi bus parengti ir paruošti naudoti, kai paspaudimas paskatins juos rodyti.

.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

Mes sukursime greitą papildinį, kad šią funkciją būtų galima iškviesti bet kuriame „div“ pakete, kuriame yra ta pati HTML sąranka. =

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

Naudojimas

Tada mes tiesiog paskambiname įskiepiui, kai DOM, žinoma, yra pasirengęs.

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