Stilizirani skočni izbornik - CSS-trikovi

Anonim

Ideja je Veer.com-a i kako se bave padajućim izbornicima za stvari poput veličina majica. Hvala Dennisu Sa.

Pogledajte demo

HTML

Umotat ćemo redoviti unos teksta u, koji također sadrži nesređeni popis koji će predstavljati vrijednosti za skočni izbornik.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Popisi će se prema zadanim postavkama sakriti, ali svejedno stilizirani i spremni za upotrebu kad ih klik klikne da se prikažu.

.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

Sastavit ćemo brzi dodatak kako bi se ova funkcija mogla pozvati na bilo kojem omotu div koji sadrži istu HTML postavku. =

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

Upotreba

Tada samo pozivamo dodatak, kada je DOM naravno spreman.

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