Stylizowane menu podręczne - CSS-Tricks

Anonim

Pomysł pochodzi z Veer.com i jak radzą sobie z rozwijanymi listami takich rzeczy, jak rozmiary koszulek. Dziękuję Dennisowi Sa.

Zobacz demo

HTML

Zwykłe dane wejściowe umieścimy wewnątrz elementu, który zawiera również nieuporządkowaną listę, która będzie reprezentować wartości dla menu podręcznego.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Listy będą domyślnie ukryte, ale nadal wszystkie stylizowane i gotowe do użycia, gdy kliknięcie spowoduje ich wyświetlenie.

.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

Wrzucimy razem szybką wtyczkę, aby tę funkcję można było wywołać w dowolnym opakowaniu div zawierającym tę samą konfigurację 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);

Stosowanie

Następnie po prostu wywołujemy wtyczkę, gdy DOM jest oczywiście gotowy.

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