स्टाइल पॉपअप मेनू - सीएसएस-ट्रिक्स

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 )

jQuery

हम एक त्वरित प्लगइन को एक साथ फेंक देंगे, ताकि इस कार्यक्षमता को किसी भी div आवरण पर बुलाया जा सके जिसमें यह समान 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);

प्रयोग

तब हम सिर्फ प्लगइन को कॉल करते हैं, जब DOM कोर्स के लिए तैयार होता है।

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