Štýlové rozbaľovacie menu Triky CSS

Anonim

Táto myšlienka pochádza z Veer.com a ako sa zaoberajú rozbaľovacími ponukami pre veci, ako sú veľkosti tričiek. Ďakujem Dennisovi Sa.

Zobraziť ukážku

HTML

Bežný textový vstup zabalíme do znaku, ktorý obsahuje aj neusporiadaný zoznam, ktorý bude predstavovať hodnoty rozbaľovacej ponuky.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Zoznamy budú predvolene skryté, ale stále všetky upravené a pripravené na použitie, keď ich kliknutie spustí.

.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

Zhodíme rýchly doplnok, aby bolo možné túto funkcionalitu vyvolať na ľubovoľnom obale div, ktorý obsahuje rovnaké nastavenie HTML

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

Využitie

Potom už len zavoláme plugin, keď je DOM samozrejme pripravený.

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