Стилизовани скочни мени - ЦСС-трикови

Anonim

Ова идеја је Веер.цом и како се баве падајућим менијима за ствари попут величина мајица. Хвала Деннису Са.

Погледајте демо

ХТМЛ

Умотаћемо редован унос текста у, који такође садржи неуређену листу која ће представљати вредности за искачући мени.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

ЦСС

Спискови ће бити подразумевано сакривени, али и даље сви стилизовани и спремни за употребу када их кликне да их прикажу.

.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 )

јКуери

Саставићемо брзи додатак, тако да се ова функција може позвати на било ком омоту див који садржи исту ХТМЛ поставку. =

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

Употреба

Тада само позивамо додатак, када је ДОМ наравно спреман.

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