Αναδυόμενο μενού με στυλ - CSS-Κόλπα

Anonim

Αυτή η ιδέα προέρχεται από το Veer.com και πώς χειρίζονται τα αναπτυσσόμενα μενού για πράγματα όπως τα μεγέθη μπλουζών. Ευχαριστώ στον Dennis Sa.

Προβολή επίδειξης

HTML

Θα τυλίξουμε μια κανονική εισαγωγή κειμένου μέσα σε ένα, το οποίο περιέχει επίσης μια λίστα χωρίς ταξινόμηση που θα αντιπροσωπεύει τις τιμές για το αναδυόμενο μενού.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Οι λίστες θα είναι κρυφές από προεπιλογή, αλλά εξακολουθούν να είναι όλες διακοσμημένες και έτοιμες να ξεκινήσουν όταν ένα κλικ τους ενεργοποιεί για εμφάνιση.

.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

Θα ρίξουμε μαζί ένα γρήγορο plugin, έτσι ώστε αυτή η λειτουργικότητα να μπορεί να καλείται σε οποιοδήποτε wrapper 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);

Χρήση

Τότε απλώς καλούμε το plugin, όταν το DOM είναι έτοιμο φυσικά.

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