Tarz Açılır Menü - CSS Hileleri

Anonim

Bu fikir Veer.com'dan ve T-Shirt bedenleri gibi şeyler için açılır menüleri nasıl ele aldıklarını anlatıyor. Dennis Sa'ya teşekkürler.

Demoyu Görüntüle

HTML

Normal bir metin girişini, açılır menü için değerleri temsil edecek sırasız bir liste de içeren bir içeriğin içine kaydıracağız.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Listeler varsayılan olarak gizlenecek, ancak yine de hepsi biçimlendirilecek ve bir tıklama gösterilmeleri için tetiklediğinde kullanıma hazır olacaktır.

.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

Birlikte hızlı bir eklenti atacağız, böylece bu işlevsellik aynı HTML kurulumunu içeren herhangi bir div sarmalayıcısında çağrılabilir. =

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

Kullanım

Sonra, DOM hazır olduğunda tabii ki eklentiyi çağırırız.

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